/*
 * The Agromigo theme's stylesheet: tokens, the bordered floating header,
 * buttons that turn into a lime pill on hover, centred section headings over
 * coloured icon cards, and the footer's pay-off. The content names its
 * sections with `agromigo-*` classes.
 *
 * One file per part of the page, joined in name order by build.mjs into
 * dist/ under a name that carries its fingerprint, so the host's edge cache,
 * which ignores `?ver=`, serves a changed stylesheet fresh. A later file may
 * rely on an earlier one. The brand font is declared in theme.json.
 */

/* ─── Tokens ──────────────────────────────────────────────────────────────── */

.agromigo {
  --agromigo-charcoal: #172024;
  --agromigo-lime: #e1ffa1;
  --agromigo-sage: #adc7c2;
  --agromigo-blue: #94d6ff;
  --agromigo-peach: #ffc294;
  --agromigo-pink: #ffa1c2;
  --agromigo-olive: #6d8563;
  /* Olive darkened for small text: 5.4:1 on white and 4.9:1 on lime, where
     the brand olive is 4.05:1 and 3.7:1, under WCAG AA's 4.5:1. */
  --agromigo-olive-text: #5b7053;
  --agromigo-white: #ffffff;
  --agromigo-font: 'BwGradual', Helvetica, Arial, sans-serif;
  --agromigo-font-size: clamp(1rem, 0.8333rem + 0.4444vw, 1.25rem);
  --agromigo-max: 1550px;
  --agromigo-container-padding: clamp(1rem, 5vw, 3rem);
  /* Spacing and type that shrink on a phone and stop at their desktop size:
     clamp(phone minimum, fluid, desktop). The desktop value is the upper
     bound, so a wide screen renders exactly as these tokens' fixed values
     did; only narrower screens get the smaller sizes. */
  --agromigo-gutter: clamp(1rem, 0.25rem + 2.1vw, 2rem);
  --agromigo-section: clamp(2.5rem, 1rem + 4.2vw, 4rem);
  --agromigo-padding: clamp(1.25rem, 0.5rem + 2.1vw, 2rem);
  --agromigo-size-display: clamp(2rem, 1.25rem + 3vw, calc(var(--agromigo-font-size) * 3));
  --agromigo-size-title: clamp(1.9rem, 1rem + 2.8vw, calc(var(--agromigo-font-size) * 2.6));
  --agromigo-size-h2: clamp(1.6rem, 0.9rem + 2.4vw, calc(var(--agromigo-font-size) * 2.2));
  --agromigo-size-feature: clamp(1.4rem, 0.8rem + 1.9vw, calc(var(--agromigo-font-size) * 1.8));
  --agromigo-size-lead: clamp(1.25rem, 0.8rem + 1.6vw, calc(var(--agromigo-font-size) * 1.6));
  --agromigo-size-proposition: clamp(1.2rem, 0.8rem + 1.4vw, calc(var(--agromigo-font-size) * 1.5));
  --agromigo-size-quote: clamp(1.15rem, 0.8rem + 1.3vw, calc(var(--agromigo-font-size) * 1.4));
  /* Small print never drops under 13px, where the 0.7 step would on a phone. */
  --agromigo-size-small: max(0.8125rem, calc(var(--agromigo-font-size) * 0.7));
  --agromigo-size-note: max(0.875rem, calc(var(--agromigo-font-size) * 0.8));
  --agromigo-size-kicker: max(0.8125rem, calc(var(--agromigo-font-size) * 0.75));
  --agromigo-radius: 6px;
  --agromigo-border: 2px;
  --agromigo-header-height: 4em;
  --agromigo-header-top: calc(1rem + var(--wp-admin--admin-bar--height, 0px));
  --agromigo-side: max(var(--agromigo-container-padding), calc((100% - var(--agromigo-max)) / 2));
  --agromigo-narrow: min(100%, 46rem);
  /* The theme's own names, which the Stories cards and the impact
     calculator are styled with; the theme's stylesheet is not loaded here. */
  --houtskool: var(--agromigo-charcoal);
  --kiem: var(--agromigo-lime);
  --salie: var(--agromigo-sage);
  --olijf: var(--agromigo-olive);
  --bg-color: var(--agromigo-white);
  --txt-color: var(--agromigo-charcoal);
  --border-radius: var(--agromigo-radius);
  --border-width: var(--agromigo-border);
  --gutter: var(--agromigo-gutter);
  --padding: var(--agromigo-padding);
  --section-margin: var(--agromigo-section);
  --font-size: var(--agromigo-font-size);
  --transition-speed: 460ms;
  --max-width: var(--agromigo-max);
  --container-padding: var(--agromigo-container-padding);
  --width-8-cols: calc(var(--agromigo-max) * 0.6667);

  margin: 0;
  background: var(--agromigo-white) url('../assets/img/bg-wash.webp') center top / 100% auto
    no-repeat;
  color: var(--agromigo-charcoal);
  font-family: var(--agromigo-font);
  font-size: var(--agromigo-font-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.agromigo *,
.agromigo *::before,
.agromigo *::after {
  box-sizing: border-box;
}
.agromigo {
  -webkit-tap-highlight-color: transparent;
}
.agromigo ::selection {
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
}
@media (prefers-reduced-motion: no-preference) {
  html.agromigo-js {
    scroll-behavior: smooth;
  }
}
.agromigo img,
.agromigo video {
  max-width: 100%;
  height: auto;
}
.agromigo p,
.agromigo ul,
.agromigo figure,
.agromigo blockquote {
  margin: 0;
}
.agromigo h1 {
  margin: 0;
  font-size: var(--agromigo-size-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}
.agromigo h2 {
  margin: 0;
  font-size: var(--agromigo-size-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.agromigo h3 {
  margin: 0;
  font-size: calc(var(--agromigo-font-size) * 1.2);
  font-weight: 500;
  line-height: 1.15;
}
.agromigo a {
  color: inherit;
}
.agromigo [id] {
  scroll-margin-top: calc(var(--agromigo-header-top) + var(--agromigo-header-height) + 1rem);
}
.agromigo :focus-visible {
  outline: 3px solid var(--agromigo-charcoal);
  outline-offset: 3px;
}
.agromigo .agromigo-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.agromigo-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime) !important;
  border-radius: var(--agromigo-radius);
}
.agromigo-skip:focus {
  top: 12px;
}
/* Launched, the skip link is WordPress's own (it targets the template's
   main element); it wears the same look. */
.agromigo .skip-link.screen-reader-text:focus {
  top: 12px;
  left: 16px;
  padding: 0.6rem 1rem;
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
}

/* ─── Buttons: a 6px block that becomes a lime pill on hover ─────────────── */

.agromigo .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.agromigo .wp-block-button__link,
.agromigo-nav a,
.agromigo .agromigo-footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5em 1em;
  border: var(--agromigo-border) solid var(--agromigo-lime);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
  font: 700 1em/1.2 var(--agromigo-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease-in-out;
}
.agromigo .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  border-color: var(--agromigo-charcoal);
}
.agromigo .wp-block-button__link:hover,
.agromigo .wp-block-button__link:focus-visible,
.agromigo .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.agromigo .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.agromigo .agromigo-footer-button:hover,
.agromigo .agromigo-footer-button:focus-visible {
  border-color: var(--agromigo-lime);
  border-radius: 3em;
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
}

/* ─── Header: the theme's floating, bordered, frosted bar ────────────────── */

.agromigo-header {
  position: fixed;
  top: var(--agromigo-header-top);
  left: 50%;
  z-index: 1100;
  width: calc(100% - var(--agromigo-container-padding));
  max-width: var(--agromigo-max);
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 45%));
  transform: translateX(-50%);
}
.agromigo-header {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.agromigo-header.is-scrolled {
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 8px 24px rgb(23 32 36 / 12%);
}
.agromigo-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.agromigo-header-in {
  display: flex;
  /* Without the script a bar too wide for the screen wraps its links onto a
     second row instead of running off it. */
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-height: var(--agromigo-header-height);
  padding: 0 1em 0 1.25em;
}
/* While the script measures, the bar stays on one row so an overflow shows. */
.agromigo-measure :is(.agromigo-header-in, .agromigo-nav ul) {
  flex-wrap: nowrap;
}
.agromigo .agromigo-logo {
  display: inline-flex;
  flex: none;
  color: var(--agromigo-charcoal);
}
.agromigo .agromigo-logo-svg {
  display: block;
  width: 9.5em;
  height: auto;
}
.agromigo-nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.agromigo-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agromigo-nav-links {
  margin-left: auto !important;
}
.agromigo-nav-actions {
  margin-left: 3em !important;
}
.agromigo-nav a {
  min-height: 0;
  border-color: transparent;
  background: transparent;
}
.agromigo-nav a:hover,
.agromigo-nav a:focus-visible {
  border-color: var(--agromigo-lime);
  border-radius: 3em;
  background: var(--agromigo-lime);
}
/* Log in and the trial are a pair: the outline button and the filled one,
   the same size, both turning into the lime pill on hover, with room
   between them so they read as two choices. */
.agromigo .agromigo-login,
.agromigo .agromigo-signup {
  min-height: 44px;
  font-weight: 700;
}
.agromigo .agromigo-login {
  border-color: var(--agromigo-charcoal);
}
/* The language switcher, Log in and the trial, evenly spaced. Two classes
   deep, to outrank the menu's own `.agromigo-nav ul` gap. */
.agromigo .agromigo-nav-actions {
  gap: 0.75rem;
}
.agromigo .agromigo-signup {
  border-color: var(--agromigo-charcoal);
  background: var(--agromigo-charcoal);
  color: var(--agromigo-white);
}
.agromigo .agromigo-signup:hover,
.agromigo .agromigo-signup:focus-visible {
  color: var(--agromigo-charcoal);
}
/* The language switcher. On a wide screen a dropdown in the bar: the globe
   and the current language's code, opening onto every language in its own
   name, the current one ticked. In the open menu on a narrow screen, a row
   of the same languages (.agromigo-lang-row). */
.agromigo-lang {
  position: relative;
}
/* Two classes deep, to outrank the menu's own `.agromigo-nav ul { display: flex }`. */
.agromigo .agromigo-lang-row {
  display: none;
}
.agromigo-lang-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 40px;
  padding: 0.35em 0.7em;
  border: var(--agromigo-border) solid transparent;
  border-radius: var(--agromigo-radius);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: all 0.18s ease-in-out;
}
.agromigo-lang-menu > summary::-webkit-details-marker {
  display: none;
}
.agromigo-lang-menu > summary:hover,
.agromigo-lang-menu > summary:focus-visible,
.agromigo-lang-menu[open] > summary {
  border-color: var(--agromigo-lime);
  border-radius: 3em;
  background: var(--agromigo-lime);
}
.agromigo-lang-menu svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agromigo-lang-menu .agromigo-lang-chevron {
  width: 0.9em;
  transition: transform 0.18s ease-in-out;
}
.agromigo-lang-menu[open] .agromigo-lang-chevron {
  transform: rotate(180deg);
}
.agromigo .agromigo-lang-list {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 11rem;
  margin: 0;
  padding: 0.4rem;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-white);
  list-style: none;
}
.agromigo .agromigo-lang-list a {
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 0.35em 0.75em;
  font-weight: 500;
}
.agromigo .agromigo-lang-list a[aria-current] {
  font-weight: 700;
}
.agromigo .agromigo-lang-list a[aria-current]::after {
  content: '✓';
  margin-left: 1rem;
}
.agromigo .agromigo-signup-compact {
  display: none;
}
.agromigo-menu-button {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}
.agromigo-menu-icon,
.agromigo-menu-icon::before,
.agromigo-menu-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  margin: auto;
  background: var(--agromigo-charcoal);
  transition: transform 0.2s ease;
}
.agromigo-menu-icon {
  position: relative;
}
.agromigo-menu-icon::before,
.agromigo-menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
}
.agromigo-menu-icon::before {
  top: -8px;
}
.agromigo-menu-icon::after {
  top: 8px;
}
.agromigo-menu-button[aria-expanded='true'] .agromigo-menu-icon {
  background: transparent;
}
.agromigo-menu-button[aria-expanded='true'] .agromigo-menu-icon::before {
  transform: translateY(8px) rotate(45deg);
}
.agromigo-menu-button[aria-expanded='true'] .agromigo-menu-icon::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* The folded header: logo, Start free and the menu button, the menu behind
   the button. The script (src/js/site.js, "Header fit") sets .agromigo-fold on the
   root whenever the full bar does not fit on one row, measured in the page's
   own language and with its own labels and languages, so a longer
   translation or another language folds it where needed rather than at a
   fixed width. Before the script runs, an inline guess folds below 1280px.
   Without the script the bar never folds; its links wrap instead. */
.agromigo-fold .agromigo-lang-menu {
  display: none;
}
.agromigo-fold .agromigo .agromigo-lang-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  list-style: none;
}
.agromigo-fold .agromigo .agromigo-lang-row a {
  justify-content: center;
  width: auto;
  padding: 0.35em 1em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  font-weight: 500;
}
/* The current language as the selected filter chip: a charcoal block. */
.agromigo-fold .agromigo .agromigo-lang-row a[aria-current] {
  background: var(--agromigo-charcoal);
  color: var(--agromigo-white);
  font-weight: 700;
}
/* Folded, the open menu drops below the logo row. */
.agromigo-fold .agromigo-header-in {
  flex-wrap: wrap;
  padding-block: 0.5rem;
}
/* A phone keeps logo, Start free and the menu button on one row: on a
   360px screen the full logo, gaps and padding left no room and pushed
   the menu button onto a second row, doubling the bar over the page. */
@media (max-width: 480px) {
  .agromigo-fold .agromigo-header-in {
    gap: 0.5rem;
    padding-inline: 0.9em 0.4em;
  }
  .agromigo-fold .agromigo .agromigo-logo-svg {
    width: 7.5em;
  }
}
/* On the smallest phones the Dutch and Spanish trial labels are longer than
   "Start free"; a smaller logo and a tighter button keep the bar one row. */
@media (max-width: 360px) {
  .agromigo-fold .agromigo-header-in {
    gap: 0.375rem;
  }
  .agromigo-fold .agromigo .agromigo-logo-svg {
    width: 5.75em;
  }
  .agromigo-fold .agromigo-signup-compact {
    padding-inline: 0.5em;
  }
}
.agromigo-fold .agromigo-nav {
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
}
.agromigo-fold .agromigo-nav ul {
  flex-direction: column;
  align-items: stretch;
}
.agromigo-fold .agromigo-nav-links,
.agromigo-fold .agromigo-nav-actions {
  margin-left: 0 !important;
}
.agromigo-fold .agromigo-nav a {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
}
.agromigo-fold .agromigo :is(.agromigo-login, .agromigo-signup) {
  justify-content: center;
}
.agromigo-fold .agromigo-nav-actions {
  gap: 0.5rem;
}
.agromigo-fold .agromigo .agromigo-login {
  margin-top: 0.75rem;
}
.agromigo-fold .agromigo-menu-button {
  display: block;
  margin-left: 0.25rem;
}
.agromigo-fold .agromigo-signup-compact {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-left: auto;
  padding: 0.35em 0.9em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  font-size: calc(var(--agromigo-font-size) * 0.85);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s ease-in-out;
}
.agromigo-fold .agromigo-signup-compact:hover,
.agromigo-fold .agromigo-signup-compact:focus-visible {
  border-color: var(--agromigo-lime);
  border-radius: 3em;
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
}
.agromigo-fold .agromigo-nav {
  display: none;
}
.agromigo-fold .agromigo-header.is-open .agromigo-nav {
  display: flex;
}

/* ─── Sections ──────────────────────────────────────────────────────────── */

.agromigo-main > * {
  margin-block: 0;
}
/* On a classic theme WordPress wraps each group's blocks in an extra
   div; it takes no part in layout here, so a group's flex or grid rules
   reach its blocks. */
.agromigo .wp-block-group__inner-container {
  display: contents;
}
.agromigo .agromigo-section {
  padding: var(--agromigo-section) var(--agromigo-side);
}
/* A section opens on a centred heading and intro.
   Matched as descendants, since the group's wrapper div sits in between. */
.agromigo .agromigo-section h2,
.agromigo .agromigo-section h2 + p {
  max-width: var(--agromigo-narrow);
  margin-inline: auto;
  text-align: center;
}
.agromigo .agromigo-section h2 + p {
  margin-top: 0.5em;
}
.agromigo .agromigo-section h2 ~ .wp-block-columns,
.agromigo .agromigo-section h2 ~ .wp-block-group {
  margin-top: var(--agromigo-gutter);
}
.agromigo .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--agromigo-gutter);
  margin-bottom: 0;
}
.agromigo .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 781px) {
  .agromigo .wp-block-column {
    flex-basis: 100%;
  }
}

/* Loose blocks in a section (a note under a table, a button row, a video)
   line up on the section's centre, like its heading. */
:is(.agromigo .agromigo-section, .agromigo .agromigo-section > .wp-block-group__inner-container)
  > :is(p, h3, .wp-block-buttons, .wp-block-video, .agromigo-chips) {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}
:is(.agromigo .agromigo-section, .agromigo .agromigo-section > .wp-block-group__inner-container)
  > :is(.wp-block-buttons, .agromigo-chips) {
  justify-content: center;
}
:is(.agromigo .agromigo-section, .agromigo .agromigo-section > .wp-block-group__inner-container)
  > :is(p, h3, .wp-block-buttons, .wp-block-video, .agromigo-chips, .agromigo-table)
  + :is(p, h3, .wp-block-buttons, .wp-block-video, .agromigo-chips, .agromigo-table) {
  margin-top: 1rem;
}
:is(.agromigo .agromigo-section, .agromigo .agromigo-section > .wp-block-group__inner-container)
  > .wp-block-columns
  + :is(p, .wp-block-buttons, .agromigo-chips) {
  margin-top: 2rem;
}

/* Coloured cards: the theme's .challenges / .values card, icon on top. */
/* A card that shows the app: the screen as a phone's top half, the 4:5
   box reserved before the image arrives. */
.agromigo .agromigo-card-screen {
  width: min(100%, 14rem);
  margin: 0 auto 0.5rem;
}
.agromigo .agromigo-card-screen img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: calc(var(--agromigo-radius) * 2);
  background: var(--agromigo-white);
}
.agromigo .agromigo-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: var(--agromigo-padding);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-sage);
  text-align: center;
}
.agromigo .agromigo-cards h3 {
  margin-top: 0.3em;
}
.agromigo .agromigo-icon {
  display: block;
  width: 4em;
  height: 4em;
  color: inherit;
}
.agromigo .agromigo-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.agromigo .agromigo-who {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--agromigo-size-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.agromigo .agromigo-mixed > .wp-block-column:nth-child(1) {
  background: var(--agromigo-lime);
}
.agromigo .agromigo-mixed > .wp-block-column:nth-child(2) {
  background: var(--agromigo-peach);
}
.agromigo .agromigo-mixed > .wp-block-column:nth-child(3) {
  background: var(--agromigo-blue);
}
.agromigo .agromigo-figure {
  font-size: var(--agromigo-size-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.agromigo .agromigo-note {
  font-size: var(--agromigo-size-small);
}

/* On a phone a row of cards becomes a swipeable strip, edge to edge, with
   the next card peeking in, instead of a tall stack. */
@media (max-width: 781px) {
  .agromigo .wp-block-columns.agromigo-cards {
    /* Core stacks columns with an !important wrap; this strip must not. */
    flex-wrap: nowrap !important;
    gap: 0.75rem;
    margin-inline: calc(-1 * var(--agromigo-container-padding));
    padding: 0.25rem var(--agromigo-container-padding) 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--agromigo-container-padding);
    scrollbar-width: none;
  }
  .agromigo .wp-block-columns.agromigo-cards::-webkit-scrollbar {
    display: none;
  }
  .agromigo .wp-block-columns.agromigo-cards > .wp-block-column {
    flex: 0 0 min(82%, 20rem) !important;
    scroll-snap-align: start;
  }
}

/* Plan cards, one brand colour per plan in price order: Explorer sage,
   Partner lime, Ally dauw, Custom dark with lime text. */
.agromigo .agromigo-plan-cards > .wp-block-column:nth-child(2) {
  background: var(--agromigo-lime);
}
.agromigo .agromigo-plan-cards > .wp-block-column:nth-child(3) {
  background: var(--agromigo-blue);
}
.agromigo .agromigo-plan-cards > .wp-block-column:nth-child(4) {
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
}
.agromigo .agromigo-plan-cards .agromigo-price {
  font-weight: 700;
}
.agromigo .agromigo-section .agromigo-plan-cards ~ .wp-block-buttons {
  margin-top: var(--agromigo-gutter);
}

/* The brand's button rule: on a lime background a button is dark with lime
   text, since a lime button would disappear into it. */
:is(
    .agromigo .agromigo-story-band,
    .agromigo .agromigo-mixed > .wp-block-column:nth-child(1),
    .agromigo .agromigo-plan-cards > .wp-block-column:nth-child(-n + 3)
  )
  .wp-block-button__link {
  border-color: var(--agromigo-charcoal);
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
}

/* A card's way into the story that shows it, at the card's foot so the links
   line up across a row. */
.agromigo .agromigo-cards .agromigo-card-link {
  margin-top: auto;
  padding-top: 0.25rem;
  font-weight: 700;
}
.agromigo .agromigo-card-link a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.agromigo .agromigo-card-link a::after {
  content: ' →';
}

/* Hero: a full-width photo with the theme's frosted card on it. */
.agromigo .agromigo-hero {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: min(92vh, 52rem);
  padding: calc(var(--agromigo-header-top) + var(--agromigo-header-height) + 2rem)
    var(--agromigo-side) var(--agromigo-section);
  overflow: hidden;
}
.agromigo .agromigo-hero .wp-block-cover__background {
  opacity: 0;
}
.agromigo .agromigo-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  width: min(100%, 42rem) !important;
  max-width: none;
  margin: 0 0 0 auto;
  padding: 3em 2em;
  border-radius: var(--agromigo-radius);
  background: rgb(23 32 36 / 35%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--agromigo-white);
}
.agromigo .agromigo-hero .wp-block-cover__inner-container > * + * {
  margin-top: 1rem;
}
.agromigo .agromigo-hero h1 {
  font-size: calc(var(--agromigo-font-size) * 2.6);
  color: var(--agromigo-white);
}
.agromigo .agromigo-hero :is(h1, h2) {
  text-wrap: pretty;
}
.agromigo .agromigo-hero p {
  color: var(--agromigo-white);
}
.agromigo .agromigo-kicker {
  font-size: var(--agromigo-size-kicker);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agromigo-lime) !important;
}
.agromigo .agromigo-lede {
  font-size: calc(var(--agromigo-font-size) * 1.1);
  font-weight: 500;
  line-height: 1.4;
}
.agromigo .agromigo-hero .wp-block-buttons {
  margin-top: 1.5rem;
}
.agromigo .agromigo-hero .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: var(--agromigo-lime);
  color: var(--agromigo-lime);
}
.agromigo .agromigo-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  color: var(--agromigo-charcoal);
}
.agromigo .agromigo-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  padding: 0;
  list-style: none;
  font-size: var(--agromigo-size-note);
}
.agromigo .agromigo-ticks li::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--agromigo-lime);
  vertical-align: 0.1em;
}
@media (max-width: 781px) {
  /* On a phone the photo sits above the card rather than behind all of it,
     so the headline and both buttons are on the first screen. */
  .agromigo .agromigo-hero {
    display: block;
    min-height: 0;
    padding: calc(var(--agromigo-header-top) + var(--agromigo-header-height) + 1rem) 0 0;
  }
  .agromigo .agromigo-hero .wp-block-cover__image-background {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
  .agromigo .agromigo-hero .wp-block-cover__inner-container {
    /* As strong as the desktop width it replaces: without it the 42rem cap
       left a white strip beside the card on a 672–781px screen. */
    width: 100% !important;
    margin: 0;
    padding: 1.75rem var(--agromigo-container-padding) 2.25rem;
    border-radius: 0;
    background: var(--agromigo-charcoal);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .agromigo .agromigo-hero h1 {
    font-size: calc(var(--agromigo-font-size) * 2.1);
  }
  .agromigo .agromigo-hero .wp-block-button,
  .agromigo .agromigo-hero .wp-block-button__link {
    width: 100%;
  }
}

/* The home hero's carousel: slides side by side that scroll and snap,
   whether WordPress wraps them in an inner container or not. The track is
   the inner container (classic theme), the track the script makes (block
   theme), or, without the script, the carousel itself; that last case needs
   :has(), and sits inside the :is() list so a browser without :has() drops
   it alone and keeps the other two. */
.agromigo .agromigo-carousel {
  position: relative;
}
:is(
    .agromigo .agromigo-carousel:has(> .wp-block-cover),
    .agromigo .agromigo-carousel > :is(.wp-block-group__inner-container, .agromigo-carousel-track)
  ) {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
:is(
    .agromigo .agromigo-carousel,
    .agromigo .agromigo-carousel > :is(.wp-block-group__inner-container, .agromigo-carousel-track)
  )::-webkit-scrollbar {
  display: none;
}
.agromigo .agromigo-carousel .wp-block-cover {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.agromigo .agromigo-carousel .wp-block-cover h2 {
  font-size: calc(var(--agromigo-font-size) * 2.6);
  font-weight: 900;
  color: var(--agromigo-white);
}
.agromigo-carousel-controls {
  position: absolute;
  left: var(--agromigo-side);
  bottom: var(--agromigo-section);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgb(23 32 36 / 45%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.agromigo-carousel-controls button {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--agromigo-lime);
  font: 700 1.2rem/1 var(--agromigo-font);
  cursor: pointer;
}
.agromigo-carousel-controls button:hover {
  background: rgb(225 255 161 / 15%);
}
.agromigo-carousel-controls svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agromigo-carousel-controls .agromigo-carousel-pause svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.agromigo-carousel-controls .agromigo-carousel-dot {
  min-width: 24px;
  height: 24px;
}
.agromigo-carousel-controls .agromigo-carousel-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid var(--agromigo-lime);
  border-radius: 50%;
  transition: all 0.18s ease-in-out;
}
.agromigo-carousel-controls .agromigo-carousel-dot[aria-current='true']::before {
  width: 22px;
  border-radius: 999px;
  background: var(--agromigo-lime);
}
.agromigo-carousel-controls :focus-visible {
  outline: 2px solid var(--agromigo-lime);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  :is(
      .agromigo .agromigo-carousel,
      .agromigo .agromigo-carousel > :is(.wp-block-group__inner-container, .agromigo-carousel-track)
    ) {
    scroll-behavior: smooth;
  }
}
@media (max-width: 781px) {
  /* On a phone a slide is the photo, under the floating header, then its
     card, which stretches so every slide ends on the same dark line. */
  .agromigo .agromigo-carousel .wp-block-cover {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }
  .agromigo .agromigo-carousel .wp-block-cover__image-background {
    aspect-ratio: 4 / 3;
  }
  .agromigo .agromigo-carousel .wp-block-cover__inner-container {
    flex: 1;
  }
  /* On a phone the controls sit under the slides, on the card's own dark. */
  .agromigo-carousel-controls {
    position: static;
    justify-content: center;
    padding: 0 0 1rem;
    border-radius: 0;
    background: var(--agromigo-charcoal);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .agromigo .agromigo-carousel .wp-block-cover h2 {
    font-size: calc(var(--agromigo-font-size) * 2.1);
  }
}

/* Inner pages open on a centred heading over the home page's wash. */
.agromigo .agromigo-page-hero {
  padding-top: calc(
    var(--agromigo-header-top) + var(--agromigo-header-height) + clamp(1.5rem, 4vw, 3rem)
  );
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}
/* A sub page's reader came for what follows the heading, so it follows
   closely. */
.agromigo .agromigo-page-hero + .agromigo-section {
  padding-top: clamp(1rem, 2.5vw, 1.75rem);
}
.agromigo .agromigo-page-hero h1 {
  max-width: 20ch;
  margin-inline: auto;
}
.agromigo .agromigo-page-hero .agromigo-lede {
  max-width: 40ch;
  margin: 1rem auto 0;
  font-weight: 400;
  font-size: calc(var(--agromigo-font-size) * 1.3);
}
.agromigo .agromigo-page-hero .wp-block-buttons {
  justify-content: center;
  margin-top: 1.75rem !important;
}

/* About: the heading beside one real photo, text left on a wide screen. */
.agromigo .agromigo-page-hero-photo .wp-block-columns {
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 72rem;
  margin: 0 auto;
}
.agromigo .agromigo-page-hero-photo .agromigo-photo {
  margin: 0;
}
.agromigo .agromigo-page-hero-photo .agromigo-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
}
@media (min-width: 782px) {
  .agromigo .agromigo-page-hero-photo {
    text-align: left;
  }
  .agromigo .agromigo-page-hero-photo :is(h1, .agromigo-lede) {
    margin-inline: 0;
  }
  .agromigo .agromigo-page-hero-photo .wp-block-buttons {
    justify-content: flex-start;
  }
}

/* Story views (the Stories plugin's own templates in the new frame). Their
   bare <h1> exists for the theme, which hides it; the visible title is the
   <h2> below it. */
.agromigo main.am-story,
.agromigo main.am-stories {
  /* The story column: 8 of 12 columns, centred. */
  padding: calc(var(--agromigo-header-top) + var(--agromigo-header-height) + 2rem)
    max(var(--agromigo-container-padding), calc((100% - var(--width-8-cols)) / 2))
    var(--agromigo-section);
}
.agromigo .am-grid {
  margin: 0;
  padding: 0;
}
.agromigo main.am-story > h1,
.agromigo main.am-stories > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.agromigo main.am-stories > h2:first-of-type,
.agromigo .am-story-title {
  font-size: var(--agromigo-size-title);
  font-weight: 900;
  letter-spacing: -0.01em;
}
.agromigo .am-story-article {
  max-width: 52rem;
  margin-inline: auto;
}
.agromigo .am-story-article > :is(p, ul, ol, h2, h3) {
  max-width: 44rem;
  margin-inline: auto;
}
.agromigo .am-story-article > :is(p, li) {
  line-height: 1.6;
}
.agromigo .am-story-article > h2 {
  margin-top: 2rem;
  font-size: var(--agromigo-size-lead);
}
/* More stories under a story: the theme's lime band run edge to edge, as on
   the home page (the shadow and clip paint the full width without widening
   the page), its cards in the listing's column so three sit in one row. The
   band ends the page, so it meets the footer without the main's gap. */
.agromigo .am-story-article > .am-more {
  --agromigo-more-width: min(
    var(--width-8-cols),
    calc(100vw - 2 * var(--agromigo-container-padding))
  );
  width: var(--agromigo-more-width);
  margin: var(--agromigo-section) 0 0 calc((100% - var(--agromigo-more-width)) / 2);
  padding: var(--agromigo-section) 0;
  background: var(--agromigo-lime);
  box-shadow: 0 0 0 100vmax var(--agromigo-lime);
  clip-path: inset(0 -100vmax);
}
.agromigo .am-more > h2 {
  margin: 0 0 1.5rem;
}
.agromigo main.am-story:has(.am-story-article > .am-more:last-child) {
  padding-bottom: 0;
}
/* On a phone the three cards become a swipeable strip like the home page's
   card rows, the next card peeking in, instead of a long stack. */
@media (max-width: 781px) {
  .agromigo .am-more .am-grid {
    display: flex;
    gap: 0.75rem;
    margin-inline: calc(-1 * var(--agromigo-container-padding));
    padding: 0.25rem var(--agromigo-container-padding) 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--agromigo-container-padding);
    scrollbar-width: none;
  }
  .agromigo .am-more .am-grid::-webkit-scrollbar {
    display: none;
  }
  .agromigo .am-more .am-card {
    flex: 0 0 min(82%, 20rem);
    scroll-snap-align: start;
  }
}
.agromigo .am-story-article .wp-block-buttons {
  justify-content: center;
  margin-block: 2rem;
}
/* A story's video sets its own width (capped to the screen's height by
   agromigo-site.php, centred by the Stories plugin), so the frame is drawn on
   the video rather than on its figure: a figure at the column's width shows
   its charcoal fill either side of a narrower video. The plugin's figure
   padding lines a video up with a column this frame's <main> already sets.
   The ring is a shadow, not a border, so the box keeps the video's exact
   aspect ratio and the picture is not cropped to fit it. */
.agromigo .am-story .am-story-article > .wp-block-video {
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}
.agromigo .am-story .am-story-article > .wp-block-video video {
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-charcoal);
  box-shadow: 0 0 0 var(--agromigo-border) var(--agromigo-charcoal);
}

/* The stories listing head: left-aligned in the story column, the search box and the chips under the title. */
.agromigo .am-stories-head {
  margin: 0 0 2rem;
}
.agromigo .am-stories-head h2 {
  font-size: var(--agromigo-size-title);
  font-weight: 900;
}
/* `.agromigo h2` zeroes heading margins; a topic title keeps its space
   above its cards. */
.agromigo .am-topic-title {
  margin-bottom: 0.8em;
}
.agromigo .am-stories-intro {
  max-width: 46rem;
  margin-top: 0.75rem;
  font-size: calc(var(--agromigo-font-size) * 1.1);
}
.agromigo .am-search {
  display: flex;
  width: min(100%, 34rem);
  margin: 1.5rem 0 0;
}
.agromigo .am-search input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0.6em 0.9em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-white);
  font: inherit;
}
.agromigo .am-filter {
  margin-top: 1.25rem;
}
/* Filter chips behave like the brand's buttons: a 6px block at rest that
   turns into a lime pill on hover and focus. The selected chip is dressed
   as the header's sign-up button: a charcoal block with white, bold text. The category tag
   inside a card is a label, not a control, and keeps its small lime pill. */
.agromigo .am-filter .am-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35em 1em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: transparent;
  color: var(--agromigo-charcoal);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.18s ease-in-out;
}
.agromigo .am-filter .am-chip:is([aria-current='page'], [aria-current='true']) {
  border-color: var(--agromigo-charcoal);
  background: var(--agromigo-charcoal);
  color: var(--agromigo-white);
  font-weight: 700;
}
.agromigo .am-filter .am-chip:hover,
.agromigo .am-filter .am-chip:focus-visible {
  border-color: var(--agromigo-lime);
  border-radius: 3em;
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
}

/* A story's date line, on a card or above a story. */
.agromigo .am-meta {
  color: var(--agromigo-olive-text);
}

/* Story cards in the brand's own language (huisstijl): the 2px charcoal
   border on 6px corners, no shadows. On hover the body turns lime, as the
   nav links do, the corners round off like the buttons' pill morph, and
   "Read the story" becomes the brand button. */
.agromigo .am-card {
  display: flex;
}
.agromigo .am-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-white);
  color: var(--agromigo-charcoal);
  text-decoration: none;
  transform: none;
  transition: border-radius 0.18s ease-in-out;
}
.agromigo .am-card-link:hover,
.agromigo .am-card-link:focus-visible {
  transform: none;
  border-color: var(--agromigo-charcoal);
  border-radius: 1.5em;
}
.agromigo .am-card-media {
  position: relative;
  overflow: hidden;
  border-bottom: var(--agromigo-border) solid var(--agromigo-charcoal);
}
/* A poster is shown whole on the card's charcoal box: a phone recording's
   poster is a tall screenshot, which a 16:9 crop cuts to a meaningless strip,
   and a 16:9 poster fills the box exactly as before. */
.agromigo .am-card-media img {
  object-fit: contain;
  transition: transform 0.5s ease;
}
.agromigo .am-card-link:hover .am-card-media img {
  transform: scale(1.04);
}
.agromigo .am-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
  font-weight: 700;
}
.agromigo .am-card-badge::before {
  content: '';
  border-left: 0.55em solid currentColor;
  border-top: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
}
.agromigo .am-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  transition: background 0.18s ease-in-out;
}
.agromigo .am-card-link:hover .am-card-body {
  background: var(--agromigo-lime);
}
/* Lime tags would vanish into the lime body, so they turn white with it. */
.agromigo .am-card-link:hover :is(.am-chip, .am-feature-label) {
  background: var(--agromigo-white);
  border-color: var(--agromigo-white);
}
.agromigo .am-card-title {
  font-size: calc(var(--agromigo-font-size) * 1.15);
  font-weight: 700;
  line-height: 1.25;
}
.agromigo .am-card-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.agromigo .am-card-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.45em 0.9em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s ease-in-out;
}
.agromigo .am-card-link:hover .am-card-more {
  border-radius: 3em;
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
}

/* The featured story: the newest sticky post, which the Stories plugin puts
   above the grid as its Start here banner. It is a story card laid wide, the
   poster beside the text from 720px; `.agromigo .am-card-link` would otherwise
   outrank the plugin's grid and stack it into one tall card. */
.agromigo .am-feature {
  margin: 0 0 var(--agromigo-gutter);
}
@media (min-width: 720px) {
  .agromigo .am-feature-link {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  }
  /* A grid item with an aspect ratio only stretches when told to, in both
     directions: the poster then keeps its column's width and fills a taller
     text column instead of leaving a gap. */
  .agromigo .am-feature-link .am-card-media {
    place-self: stretch;
    border-right: var(--agromigo-border) solid var(--agromigo-charcoal);
    border-bottom: 0;
  }
  .agromigo .am-feature-link .am-card-body {
    justify-content: center;
    padding: var(--agromigo-padding);
  }
}
.agromigo .am-feature-label {
  align-self: flex-start;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
  font-size: var(--agromigo-size-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agromigo .am-feature-title {
  font-size: var(--agromigo-size-feature);
  font-weight: 900;
  line-height: 1.15;
}
.agromigo .am-feature-link .am-card-more {
  margin-top: 0.5rem;
}

/* Search box, for search results and the 404 page. */
.agromigo .agromigo-search {
  display: flex;
  gap: 0.5rem;
  width: min(100%, 36rem);
  margin: 1.5rem auto 0;
}
.agromigo .agromigo-search input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0.6em 0.9em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-white);
  color: var(--agromigo-charcoal);
  font: inherit;
}
.agromigo .agromigo-search button {
  min-height: 48px;
  padding: 0.5em 1.25em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
  font: 700 1em/1 var(--agromigo-font);
  cursor: pointer;
  transition: all 0.18s ease-in-out;
}
.agromigo .agromigo-search button:hover {
  border-color: var(--agromigo-lime);
  border-radius: 3em;
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
}

/* The 404 page and the top of search results. */
.agromigo .agromigo-lost {
  padding-bottom: var(--agromigo-section);
}
.agromigo .agromigo-lost-code {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--agromigo-lime);
  -webkit-text-stroke: 2px var(--agromigo-charcoal);
}
.agromigo .agromigo-lost .agromigo-chips {
  justify-content: center;
  margin-top: 1.5rem;
}

/* Search results: one card per result, an empty state that helps. */
.agromigo .agromigo-results {
  padding-top: 0;
}
.agromigo .agromigo-result-list {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.agromigo .agromigo-result {
  padding: 1.1rem 1.25rem;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-white);
  transition: border-radius 0.18s ease-in-out;
}
.agromigo .agromigo-result:hover {
  border-radius: 18px;
}
.agromigo .agromigo-result-type {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-lime);
  font-size: var(--agromigo-size-small);
  font-weight: 700;
}
.agromigo .agromigo-result h2 {
  margin-top: 0.4rem;
  font-size: calc(var(--agromigo-font-size) * 1.25);
  text-align: left;
}
.agromigo .agromigo-result h2 a {
  text-decoration: none;
}
.agromigo .agromigo-result h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.agromigo .agromigo-result {
  position: relative;
}
.agromigo .agromigo-result p:last-child {
  margin-top: 0.3rem;
  font-size: calc(var(--agromigo-font-size) * 0.85);
}
.agromigo .agromigo-empty {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.agromigo .agromigo-empty h2 {
  font-size: var(--agromigo-size-lead);
}
.agromigo .agromigo-empty p {
  margin-top: 0.5rem;
}
.agromigo .agromigo-empty .agromigo-chips {
  justify-content: center;
  margin-top: 1.25rem;
}
.agromigo .pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 2rem;
}
.agromigo .pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  text-decoration: none;
  font-weight: 700;
}
.agromigo .pagination .page-numbers.current {
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
}

/* Tables: the theme's table style. */
.agromigo .agromigo-table {
  margin: var(--agromigo-gutter) auto 0;
  max-width: 60rem;
  overflow-x: auto;
}
.agromigo .agromigo-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--agromigo-font-size) * 0.85);
  font-variant-numeric: tabular-nums;
}
.agromigo .agromigo-table th,
.agromigo .agromigo-table td {
  padding: 0.7em 0.9em;
  border: 0;
  border-bottom: 1px solid var(--agromigo-sage);
  text-align: left;
  vertical-align: top;
}
.agromigo .agromigo-table th {
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
  font-weight: 700;
}
.agromigo .agromigo-table tr:last-child td {
  border-bottom: 0;
}

/* Cards that carry a list (the pricing page's plan cards). */
.agromigo .agromigo-cards .wp-block-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(var(--agromigo-font-size) * 0.85);
}
.agromigo .agromigo-cards .wp-block-list li + li {
  margin-top: 0.35rem;
}
.agromigo .agromigo-cards .wp-block-buttons {
  justify-content: center;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* A page reused as it is (the legal texts): readable column, theme rhythm.
   Its own groups carry the theme's spacing presets, which do not exist here. */
.agromigo .agromigo-main > .wp-block-group:not(.agromigo-section, .agromigo-carousel) {
  max-width: calc(46rem + 2 * var(--agromigo-container-padding));
  margin-inline: auto;
  padding: 0 var(--agromigo-container-padding) !important;
}
.agromigo
  .agromigo-main
  > .wp-block-group:not(.agromigo-section, .agromigo-carousel):first-of-type {
  padding-top: calc(var(--agromigo-header-top) + var(--agromigo-header-height) + 2rem) !important;
}
.agromigo .agromigo-main > .wp-block-group:not(.agromigo-section, .agromigo-carousel):last-child {
  padding-bottom: var(--agromigo-section) !important;
}
.agromigo .agromigo-main > .wp-block-group:not(.agromigo-section, .agromigo-carousel) :is(p, li) {
  margin-block: 0 0.8em;
}
.agromigo .agromigo-main > .wp-block-group:not(.agromigo-section, .agromigo-carousel) :is(h2, h3) {
  margin-block: 1.5em 0.5em;
}
.agromigo
  .agromigo-main
  > .wp-block-group:not(.agromigo-section, .agromigo-carousel)
  .wp-block-spacer {
  display: none;
}
.agromigo
  .agromigo-main
  > .wp-block-group:not(.agromigo-section, .agromigo-carousel)
  .wp-block-table
  table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--agromigo-font-size) * 0.85);
}
.agromigo
  .agromigo-main
  > .wp-block-group:not(.agromigo-section, .agromigo-carousel)
  .wp-block-table
  :is(th, td) {
  padding: 0.6em 0.8em;
  border: 1px solid var(--agromigo-sage);
  text-align: left;
  vertical-align: top;
}

.agromigo .agromigo-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}
.agromigo .agromigo-chips li {
  padding: 0.25em 0.8em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  font-size: var(--agromigo-size-note);
  font-weight: 500;
  transition: all 0.18s ease-in-out;
}
.agromigo .agromigo-chips a {
  text-decoration: none;
}
.agromigo .agromigo-chips li:has(a):hover {
  border-radius: 3em;
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
}

/* Stories: the theme's lime band with bordered cards. */
.agromigo .agromigo-story-band {
  background: var(--agromigo-lime);
}
.agromigo .agromigo-story {
  align-items: stretch;
}
.agromigo .agromigo-story > .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--agromigo-padding);
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
}
.agromigo .agromigo-story .wp-block-quote {
  padding: 0;
  border: 0;
}
.agromigo .agromigo-story .wp-block-quote p {
  font-size: var(--agromigo-size-quote);
  font-weight: 700;
  line-height: 1.3;
}
.agromigo .agromigo-story .wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--agromigo-size-note);
  font-style: italic;
}
.agromigo .agromigo-story .agromigo-chips {
  justify-content: flex-start;
  margin-top: auto;
}
.agromigo .agromigo-story > .wp-block-column:last-child {
  display: flex;
  align-items: center;
}
.agromigo .wp-block-video {
  width: 100%;
  overflow: hidden;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-charcoal);
}
.agromigo .wp-block-video video {
  display: block;
  width: 100%;
  height: auto;
}
/* The box is reserved before the poster arrives, so the page below it does
   not jump. A story's video states its own ratio inline (a phone recording
   is portrait); any other video is a 16:9 tour. */
.agromigo .wp-block-video video:not([style*='aspect-ratio']) {
  aspect-ratio: 16 / 9;
}
/* WordPress's own block CSS fills a video's box with its picture
   (`.wp-block-video [poster] { object-fit: cover }`). In full screen the box
   is the screen, so on one that is not 16:9 that crops the video's sides.
   Full screen shows the whole picture instead. Two rules, because a browser
   drops a whole selector list over a pseudo-class it does not know. */
.agromigo .wp-block-video video:fullscreen {
  object-fit: contain;
}
.agromigo .wp-block-video video:-webkit-full-screen {
  object-fit: contain;
}

/* A pull quote, on its own. */
.agromigo .agromigo-pull {
  max-width: var(--agromigo-narrow);
  margin-inline: auto;
}
.agromigo .agromigo-pull .wp-block-quote {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}
.agromigo .agromigo-pull .wp-block-quote p {
  font-size: var(--agromigo-size-lead);
  font-weight: 700;
  line-height: 1.25;
}

/* Embedded features: the stories cards and the impact calculator. */
.agromigo .agromigo-stories-embed,
.agromigo .agromigo-impact {
  padding-top: 0;
}

/* The contact form (Contact Form 7), in the theme's input style. */
.agromigo .agromigo-form .wpcf7-form,
.agromigo .agromigo-form .post-password-form {
  display: grid;
  gap: 1rem;
}
/* An internal page's password form, under its title in the page hero, held
   mid-screen so the footer does not ride up under a three-line page. */
.agromigo .agromigo-password {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70svh;
}
.agromigo .agromigo-password .post-password-form {
  width: min(100%, 24rem);
  margin: var(--agromigo-gutter) auto 0;
  text-align: left;
}
.agromigo .agromigo-password .post-password-form input[type='submit'] {
  justify-self: stretch;
}
.agromigo .agromigo-form p {
  margin: 0;
}
.agromigo .agromigo-form label {
  display: grid;
  gap: 0.35rem;
  font-weight: 500;
}
.agromigo
  .agromigo-form
  :is(
    input[type='text'],
    input[type='email'],
    input[type='tel'],
    input[type='url'],
    input[type='password'],
    select,
    textarea
  ) {
  width: 100%;
  min-height: 44px;
  padding: 0.6em 0.8em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-white);
  color: var(--agromigo-charcoal);
  font: inherit;
}
.agromigo .agromigo-form textarea {
  min-height: 9rem;
}
.agromigo .agromigo-form input[type='submit'] {
  justify-self: start;
  min-height: 44px;
  padding: 0.5em 1.25em;
  border: var(--agromigo-border) solid var(--agromigo-lime);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
  font: 700 1em/1.2 var(--agromigo-font);
  cursor: pointer;
  transition: all 0.18s ease-in-out;
}
.agromigo .agromigo-form input[type='submit']:hover {
  border-radius: 3em;
}
.agromigo .agromigo-form .wpcf7-not-valid {
  border-color: #b3261e;
}
.agromigo .agromigo-form .wpcf7-not-valid-tip {
  margin-top: 0.3rem;
  color: #b3261e;
  font-size: var(--agromigo-size-note);
}
.agromigo .agromigo-form .wpcf7-response-output {
  margin: 0;
  padding: 0.8rem 1rem;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
}
.agromigo .agromigo-form form.sent .wpcf7-response-output {
  background: var(--agromigo-lime);
}
.agromigo .agromigo-form form:is(.invalid, .failed, .spam, .unaccepted) .wpcf7-response-output {
  background: var(--agromigo-peach);
}
.agromigo .agromigo-plans a {
  font-weight: 700;
}
/* Agromigo Custom's way in, on its charcoal card: the brand's outline
   button in lime, turning into the lime pill on hover. */
.agromigo .agromigo-plans .agromigo-plan-link {
  margin-top: 0.6rem;
}
.agromigo .agromigo-plans .agromigo-plan-link a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35em 1em;
  border: var(--agromigo-border) solid var(--agromigo-lime);
  border-radius: var(--agromigo-radius);
  color: var(--agromigo-lime);
  text-decoration: none;
  transition: all 0.18s ease-in-out;
}
.agromigo .agromigo-plans .agromigo-plan-link a:hover,
.agromigo .agromigo-plans .agromigo-plan-link a:focus-visible {
  border-radius: 3em;
  background: var(--agromigo-lime);
  color: var(--agromigo-charcoal);
}

/* The savings calculator styles only its number fields and selects; text
   and email fields it leaves to the theme's global ui-elements.css, which is
   not loaded here. The same rules, so its crop, region, email and company
   fields match the rest of the form. */
.agromigo .agc-calculator form input:is([type='text'], [type='email']) {
  width: 100%;
  padding: 0.5em 1em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: transparent;
  color: var(--agromigo-charcoal);
  font: inherit;
  outline: none;
  transition: all 0.18s ease-in-out;
}
.agromigo .agc-calculator form input:is([type='text'], [type='email']):focus {
  border-color: var(--agromigo-lime);
  border-radius: 3em;
  background: var(--agromigo-lime);
}

/* The savings calculator sizes its labels and notes in fixed steps of the
   body size that drop under 13px on a phone; the same floors as this site's
   own small print (the steps are unchanged on a wide screen). */
.agromigo .agc-calculator :is(.agc-field label, .agc-row-lbl) {
  font-size: var(--agromigo-size-note);
}
.agromigo .agc-calculator :is(.agc-col-hdr, .agc-crop-or) {
  font-size: max(0.8125rem, calc(var(--agromigo-font-size) * 0.72));
}
.agromigo .agc-calculator .agc-opt {
  font-size: var(--agromigo-size-small);
}

/* Pricing */
.agromigo .agromigo-pricing-cols {
  align-items: flex-start;
}
.agromigo .agromigo-calc {
  padding: var(--agromigo-padding);
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-white);
}
.agromigo-price-calculator .agromigo-calc-label {
  font-weight: 700;
}
.agromigo-calc-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 1rem;
  font-weight: 500;
}
.agromigo-calc-field output {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.agromigo-calc-field input[type='range'] {
  grid-column: 1 / -1;
  width: 100%;
  height: 32px;
  margin: 0.2rem 0 0;
  accent-color: var(--agromigo-charcoal);
  cursor: pointer;
}
.agromigo .agromigo-calc-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: var(--agromigo-border) solid var(--agromigo-charcoal);
}
.agromigo-calc-total strong {
  font-size: var(--agromigo-size-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.agromigo-calc-total span,
.agromigo .agromigo-calc-sum {
  font-size: var(--agromigo-size-note);
  font-variant-numeric: tabular-nums;
}
.agromigo-calc-addons {
  margin: 1.25rem 0 0;
  padding: 0;
  border: 0;
}
.agromigo-calc-addons legend {
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 500;
}
.agromigo-calc-addon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
}
.agromigo-calc-addon input {
  width: 1.2em;
  height: 1.2em;
  accent-color: var(--agromigo-charcoal);
}
.agromigo-calc-addon-price {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* A price never breaks across lines; the add-on's name wraps instead. */
  white-space: nowrap;
}
.agromigo .agromigo-calc-quote {
  margin-top: 1rem;
}
.agromigo .agromigo-calc-quote[hidden] {
  display: none;
}
.agromigo .agromigo-calc-coming {
  margin-top: 0.3rem;
  font-size: var(--agromigo-size-small);
}
.agromigo-calc-result {
  margin-top: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--agromigo-border) solid var(--agromigo-charcoal);
}
.agromigo-calc-result .agromigo-calc-total {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.agromigo .agromigo-calc-plan {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.15em 0.6em;
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-lime);
  font-size: var(--agromigo-size-note);
  font-weight: 700;
}
.agromigo .agromigo-price-calculator[data-plan='explorer'] .agromigo-calc-plan {
  background: var(--agromigo-sage);
}
.agromigo .agromigo-price-calculator[data-plan='ally'] .agromigo-calc-plan {
  background: var(--agromigo-blue);
}
.agromigo .agromigo-price-calculator[data-plan='custom'] .agromigo-calc-plan {
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
}
/* The plan the calculator lands on stands out among the plan cards. */
.agromigo .agromigo-plans > .wp-block-group.is-current {
  outline: 3px solid var(--agromigo-charcoal);
  outline-offset: 3px;
}
.agromigo .agromigo-calc .wp-block-buttons {
  margin-top: 1.25rem;
}
.agromigo .agromigo-plans > .wp-block-group {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-sage);
}
.agromigo .agromigo-plans .wp-block-group :is(h3, p) {
  grid-column: 2;
}
.agromigo .agromigo-plans > .wp-block-group + .wp-block-group {
  margin-top: 0.75rem;
}
.agromigo .agromigo-plans > .wp-block-group:nth-child(2) {
  background: var(--agromigo-lime);
}
.agromigo .agromigo-plans > .wp-block-group:nth-child(3) {
  background: var(--agromigo-blue);
}
.agromigo .agromigo-plans > .wp-block-group:nth-child(4) {
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
}
.agromigo .agromigo-plans .agromigo-icon {
  grid-row: 1 / span 3;
  width: 3em;
  height: 3em;
}
.agromigo .agromigo-plans h3 {
  font-weight: 700;
}
.agromigo .agromigo-plans .agromigo-price {
  font-weight: 700;
  font-size: calc(var(--agromigo-font-size) * 0.85);
}
.agromigo .agromigo-plans p:not(.agromigo-price) {
  font-size: var(--agromigo-size-note);
}
@media (max-width: 600px) {
  .agromigo .agromigo-calc .wp-block-button,
  .agromigo .agromigo-calc .wp-block-button__link {
    width: 100%;
  }
}
/* The calculator's hint that one Agromigo Explorer per greenhouse costs less. */
.agromigo .agromigo-calc-split {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--agromigo-radius);
  background: var(--agromigo-lime);
  font-size: var(--agromigo-size-note);
  font-weight: 500;
}
.agromigo .agromigo-calc-split[hidden] {
  display: none;
}

/* Questions */
.agromigo .agromigo-faq {
  max-width: var(--agromigo-narrow);
  margin-inline: auto;
}
.agromigo .wp-block-details {
  padding-block: 1rem;
  border-top: var(--agromigo-border) solid var(--agromigo-charcoal);
}
.agromigo .wp-block-details:last-child {
  border-bottom: var(--agromigo-border) solid var(--agromigo-charcoal);
}
.agromigo .wp-block-details > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.agromigo .wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.agromigo .wp-block-details > summary::after {
  content: '+';
  flex: none;
  font-weight: 700;
}
.agromigo .wp-block-details[open] > summary::after {
  content: '−';
}
/* The less asked questions, folded under one button after the first eight;
   the last visible question keeps the list's closing rule. */
.agromigo .wp-block-details.agromigo-faq-more {
  padding-block: 0;
  border: 0;
  border-top: var(--agromigo-border) solid var(--agromigo-charcoal);
}
.agromigo .agromigo-faq-more > summary {
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  margin: 1.5rem auto 0;
  padding: 0.4em 1.1em;
  border: var(--agromigo-border) solid var(--agromigo-charcoal);
  border-radius: var(--agromigo-radius);
  transition: all 0.18s ease-in-out;
}
.agromigo .agromigo-faq-more > summary:hover,
.agromigo .agromigo-faq-more > summary:focus-visible {
  border-color: var(--agromigo-lime);
  border-radius: 3em;
  background: var(--agromigo-lime);
}
.agromigo .agromigo-faq-more[open] > summary {
  margin-bottom: 1.5rem;
}
.agromigo .wp-block-details p {
  margin-top: 0.6rem;
}

/* Closing call: the footer's colours, so the page ends in one dark band. */
.agromigo .agromigo-cta {
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
  text-align: center;
}
.agromigo .agromigo-cta h2 {
  color: var(--agromigo-lime);
}
.agromigo .agromigo-cta h2 + p {
  color: var(--agromigo-sage);
  font-weight: 700;
}
.agromigo .agromigo-cta .wp-block-buttons {
  justify-content: center;
}
.agromigo .agromigo-cta .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: var(--agromigo-lime);
  color: var(--agromigo-lime);
}
.agromigo .agromigo-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  color: var(--agromigo-charcoal);
}

/* ─── Footer: the theme's pay-off, proposition and call ─────────────────── */

.agromigo-footer {
  padding-top: var(--agromigo-section);
  background: var(--agromigo-charcoal);
  color: var(--agromigo-lime);
}
.agromigo-footer-in {
  display: grid;
  grid-template-columns: 3fr 5fr 4fr;
  gap: var(--agromigo-gutter);
  padding: 0 var(--agromigo-side);
}
.agromigo .agromigo-pay-off {
  font-size: var(--agromigo-size-display);
  font-weight: 700;
  line-height: 1.14;
  color: var(--agromigo-lime);
}
.agromigo .agromigo-proposition {
  font-size: var(--agromigo-size-proposition);
  font-weight: 700;
  line-height: 1.25;
  color: var(--agromigo-sage);
}
.agromigo .agromigo-footer-heading {
  margin-bottom: 1rem;
  font-size: calc(var(--agromigo-font-size) * 1.2);
  font-weight: 500;
  color: var(--agromigo-white);
}
.agromigo-footer-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2em;
  margin-top: var(--agromigo-gutter) !important;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgb(225 255 161 / 25%);
  list-style: none;
  font-size: var(--agromigo-size-note);
}
.agromigo-footer a {
  color: var(--agromigo-white);
  text-decoration: none;
}
.agromigo-footer a:hover {
  text-decoration: underline;
}
.agromigo .agromigo-footer a.agromigo-footer-button {
  color: var(--agromigo-charcoal);
  text-decoration: none;
}
.agromigo-footer :focus-visible {
  outline-color: var(--agromigo-lime);
}
.agromigo-footer-legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1rem 0 2rem;
  font-size: var(--agromigo-size-small);
  color: var(--agromigo-sage);
}
@media (max-width: 900px) {
  .agromigo-footer-in {
    grid-template-columns: 1fr;
  }
}
/* On a phone the links are two columns of full-height rows, each a 44px
   target, instead of a cramped wrapping line. */
@media (max-width: 600px) {
  .agromigo-footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    font-size: var(--agromigo-font-size);
  }
  .agromigo-footer-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/*
 * The brand icons' and the logo's own hover animations. They key on each
 * icon's svg id (#growth, #fair, #logo, ...). 16-icon-motion.css adds the icons these leave still; the
 * reduced-motion rule in 17-motion.css stops them all.
 */

/*------------------------------------*\
    SVG ANIMATIES
\*------------------------------------*/

/* --- 1. TRIAL: Pijl van links naar rechts --- */
/* Zoek in je SVG naar de pijl en geef deze class="anim-arrow" */
.anim-arrow {
  transition: transform 0.4s ease-out;
}

/* Bij hover over de container (bijv. de link of de box eromheen) */
*:hover > svg .anim-arrow,
*:hover > .anim-arrow {
  transform: translateX(10px); /* Schuift 10px naar rechts */
}

/* --- 2. GROWTH: Plantje groeit --- */
/* Zoek naar de bladeren/stengel en geef class="anim-plant" */
.anim-plant {
  transform-box: fill-box; /* Zorgt dat transformatie kijkt naar het element zelf */
  transform-origin: bottom center; /* Groeien vanaf de bodem */
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Beetje 'bouncy' */
  /* Optioneel: begin iets kleiner */
  /* transform: scaleY(0.8); */
}

*:hover > svg .anim-plant,
*:hover > .anim-plant {
  transform: scaleY(1.2); /* Groeit 20% in hoogte */
}

/* --- 3. REPORTS: Staafjes omhoog --- */
/* Geef de staafjes classes: "anim-bar bar-1", "anim-bar bar-2", etc. */
.anim-bar {
  transform-box: fill-box;
  transform-origin: bottom; /* Groeien vanaf de bodem */
  transition: transform 0.4s ease;
}

/* Zet ze standaard laag (bijvoorbeeld op 50%) */
.anim-bar {
  transform: scaleY(0.5);
}

/* Bij hover: terug naar volle lengte (of zelfs iets groter) */
*:hover > svg .anim-bar {
  transform: scaleY(1);
}

/* Stagger effect: ze bewegen na elkaar */
*:hover > svg .bar-1 {
  transition-delay: 0ms;
}
*:hover > svg .bar-2 {
  transition-delay: 100ms;
}
*:hover > svg .bar-3 {
  transition-delay: 200ms;
}
svg {
  --animation-duration: 2s;
  --animation-iteration: infinite;
  --animation-timing: ease-in-out;
  --animation-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.st {
  stroke: currentColor;
  stroke-width: 3px !important;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

figure:has(svg) {
  container-type: inline-size;

  svg {
    width: 100%;
    height: 100%;
  }
}
@container (max-width: 100px) {
  .st {
    stroke-width: 4px !important;
  }
}

/* Logo */
/* Woordbeeld */
@keyframes rise-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Logo Animatie --- */
/* =========================================
   KEYFRAMES LOGO (Load & Hover gedupliceerd)
   ========================================= */

/* Woordbeeld */
@keyframes rise-up-load {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes rise-up-hover {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Beeldmerk Lijnen */
@keyframes bm2-outer-load {
  0% {
    stroke-dashoffset: 150;
  }
  25%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes bm2-outer-hover {
  0% {
    stroke-dashoffset: 150;
  }
  25%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes bm2-center-load {
  0%,
  25% {
    stroke-dashoffset: 150;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes bm2-center-hover {
  0%,
  25% {
    stroke-dashoffset: 150;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes bm2-inner-load {
  0%,
  33% {
    stroke-dashoffset: -150;
  }
  68%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes bm2-inner-hover {
  0%,
  33% {
    stroke-dashoffset: -150;
  }
  68%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes bm2-hyphen-load {
  0%,
  75% {
    stroke-dashoffset: -20;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes bm2-hyphen-hover {
  0%,
  75% {
    stroke-dashoffset: -20;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* =========================================
   LOGO STYLING & TRIGGERS
   ========================================= */

#logo {
  animation-delay: 0.6s;

  .letter {
    transform: translateY(0);
    opacity: 1;
    fill: currentColor;
    stroke: none;
  }
  #logo-outer {
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
  }
  #logo-center {
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
  }
  #logo-inner {
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
  }
  #logo-hyphen {
    stroke-dasharray: 20;
    stroke-dashoffset: 0;
  }

  /* ANIMATIES BIJ PAGINA LADEN 
    /* 'backwards' forceert dat ze onzichtbaar (0% status) starten tijdens de delay! */
  /* .letter { animation: rise-up-load 0.4s ease-out backwards; } */
  .letter:nth-child(1) {
    animation-delay: 0.1s;
  }
  .letter:nth-child(2) {
    animation-delay: 0.15s;
  }
  .letter:nth-child(3) {
    animation-delay: 0.2s;
  }
  .letter:nth-child(4) {
    animation-delay: 0.25s;
  }
  .letter:nth-child(5) {
    animation-delay: 0.3s;
  }
  .letter:nth-child(6) {
    animation-delay: 0.35s;
  }
  .letter:nth-child(7) {
    animation-delay: 0.4s;
  }
  .letter:nth-child(8) {
    animation-delay: 0.45s;
  }

  #logo-outer {
    animation: bm2-outer-load var(--animation-duration) ease-in-out backwards;
  }
  #logo-center {
    animation: bm2-center-load var(--animation-duration) ease-in-out backwards;
  }
  #logo-inner {
    animation: bm2-inner-load var(--animation-duration) ease-in-out backwards;
  }
  #logo-hyphen {
    animation: bm2-hyphen-load var(--animation-duration) ease-in-out backwards;
  }

  /* HERSTART ANIMATIES BIJ HOVER */
  /* Verandert uitsluitend de naam van de keyframes, waardoor de browser ze opnieuw activeert */
  /* &:hover .letter      { animation-name: rise-up-hover; } */
  &:hover {
    animation-delay: 0;
    #logo-outer {
      animation-name: bm2-outer-hover;
    }
    #logo-center {
      animation-name: bm2-center-hover;
    }
    #logo-inner {
      animation-name: bm2-inner-hover;
    }
    #logo-hyphen {
      animation-name: bm2-hyphen-hover;
    }
  }
}

#logo:not(:hover) #logo-outer,
#logo:not(:hover) #logo-center,
#logo:not(:hover) #logo-inner,
#logo:not(:hover) #logo-hyphen {
  animation: none;
}

.logo-foon {
}

/* --- Beeldmerk --- */

@keyframes draw-path {
  0% {
    stroke-dashoffset: 150;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-path {
  0% {
    stroke-dashoffset: 150;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-path-inverse {
  0% {
    stroke-dashoffset: 150;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-hyphen {
  0% {
    stroke-dasharray: 0, 20;
    stroke-dashoffset: 10;
  }
  50% {
    stroke-dasharray: 0, 20;
    stroke-dashoffset: 10;
  }
  70%,
  100% {
    stroke-dasharray: 20, 0;
    stroke-dashoffset: 0;
  }
}

.wp-block-column:hover #beeldmerk,
.agromigo-icon.is-intro #beeldmerk,
#beeldmerk:hover {
  .draw {
    animation: draw-path var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
  }
  #inner.draw {
    animation: draw-path-inverse var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
  }
  #hyphen {
    animation: draw-hyphen var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
  }
}

/* Beeldmerk 2  */
@keyframes bm2-outer {
  0% {
    stroke-dashoffset: 150;
  }
  25%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes bm2-center {
  0%,
  25% {
    stroke-dashoffset: 150;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes bm2-inner {
  0%,
  33% {
    stroke-dashoffset: -150;
  }
  68%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes bm2-hyphen {
  0%,
  68% {
    stroke-dashoffset: -20;
  }
  78%,
  100% {
    stroke-dashoffset: 0;
  }
}

#beeldmerk2 {
  --animation-duration: 3s;
}

.wp-block-column:hover #beeldmerk2,
.agromigo-icon.is-intro #beeldmerk2,
#beeldmerk2:hover {
  #outer2 {
    animation: bm2-outer var(--animation-duration) ease-in-out var(--animation-iteration);
    stroke-dasharray: 150;
  }
  #center2 {
    animation: bm2-center var(--animation-duration) ease-in-out var(--animation-iteration);
    stroke-dasharray: 150;
  }
  #inner2 {
    animation: bm2-inner var(--animation-duration) ease-in-out var(--animation-iteration);
    stroke-dasharray: 150;
  }
  #hyphen2 {
    animation: bm2-hyphen var(--animation-duration) ease-in-out var(--animation-iteration);
    stroke-dasharray: 20;
  }
}

/* Beeldmerk 3 loader */
@keyframes bm3-outer {
  0% {
    stroke-dashoffset: 0;
  }
  25% {
    stroke-dashoffset: 124;
  }

  50%,
  100% {
    stroke-dashoffset: 248;
  }
}
@keyframes bm3-center {
  0% {
    stroke-dashoffset: 0;
  }
  25% {
    stroke-dashoffset: 110;
  }
  50%,
  100% {
    stroke-dashoffset: 220;
  }
}
@keyframes bm3-inner {
  0% {
    stroke-dashoffset: 0;
  }
  25% {
    stroke-dashoffset: -80;
  }
  50%,
  100% {
    stroke-dashoffset: -160;
  }
}
@keyframes bm3-hyphen {
  0% {
    stroke-dashoffset: 0;
  }
  15% {
    stroke-dashoffset: 20;
  }
  30%,
  100% {
    stroke-dashoffset: 40;
  }
}

.wp-block-column:hover #outer3,
.agromigo-icon.is-intro #outer3,
#beeldmerk3:hover #outer3 {
  animation: bm3-outer 3s ease-in-out infinite;
  stroke-dasharray: 124;
}
.wp-block-column:hover #center3,
.agromigo-icon.is-intro #center3,
#beeldmerk3:hover #center3 {
  animation: bm3-center 3s ease-in-out 1.3s infinite;
  stroke-dasharray: 110;
}
.wp-block-column:hover #inner3,
.agromigo-icon.is-intro #inner3,
#beeldmerk3:hover #inner3 {
  animation: bm3-inner 3s ease-in-out 2.6s infinite;
  stroke-dasharray: 80;
}
.wp-block-column:hover #hyphen3,
.agromigo-icon.is-intro #hyphen3,
#beeldmerk3:hover #hyphen3 {
  animation: bm3-hyphen 3s ease-in-out 3.8s infinite;
  stroke-dasharray: 20;
}

/* --- Growth --- */
#growth {
  --animation-iteration: infinite;
  --animation-timing: ease-in-out;
  --animation-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  7% {
    transform: rotate(-3deg);
  }
  15% {
    transform: rotate(3deg);
  }
  22% {
    transform: rotate(-2deg);
  }
  30% {
    transform: rotate(2deg);
  }
  38% {
    transform: rotate(-1deg);
  }
  45% {
    transform: rotate(1deg);
  }
  50%,
  100% {
    transform: rotate(0deg);
  }
}

@keyframes morph-leaf-left {
  0% {
    d: path(
      'M36,69.6 C38.857,68.533 41.238,68.888 43.142,70.666 C45.047,72.444 46,74.044 46,75.466 C43.142,76.177 40.920,76.177 39.333,75.466 C37.746,74.755 36.634,72.8 36,69.6 Z'
    );
  }
  40%,
  100% {
    d: path(
      'M22,60 C28,58 33,58.666 37,62 C41,65.333 43,68.333 43,71 C37,72.333 32.333,72.333 29,71 C25.666,69.666 23.333,66 22,60 Z'
    );
  }
}
@keyframes morph-leaf-right {
  0% {
    d: path(
      'M63,69.6 C60.142,68.533 57.761,68.888 55.857,70.666 C53.952,72.444 53,74.044 53,75.466 C55.857,76.177 58.079,76.177 59.666,75.466 C61.253,74.755 62.365,72.8 63,69.6 Z'
    );
  }
  40%,
  100% {
    d: path(
      'M78,60 C72,58 67,58.666 63,62 C59,65.333 57,68.333 57,71 C63,72.333 67.666,72.333 71,71 C74.333,69.666 76.666,66 78,60 Z'
    );
  }
}
@keyframes morph-stem {
  0% {
    d: path('M50,65 C50,68.71 49.666,74.043 49,81');
  }
  40%,
  100% {
    d: path('M50,58 C50,63.333 49.666,71 49,81');
  }
}
@keyframes morph-flower {
  0% {
    cy: 59px;
    r: 4px;
  }
  40%,
  100% {
    cy: 37px;
    r: 20px;
  }
}
@keyframes pop-dollar {
  0%,
  55% {
    opacity: 0;
    transform: scale(0);
  }
  70%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#dollar-sign {
  transform-box: fill-box;
  transform-origin: center;
}

.wp-block-column:hover #growth,
.agromigo-icon.is-intro #growth,
#growth:hover {
  & #leaf-left {
    transform-origin: right bottom;
    animation: morph-leaf-left var(--animation-duration) var(--animation-timing)
        var(--animation-iteration),
      wiggle var(--animation-duration) var(--animation-timing) var(--animation-iteration);
  }
  & #leaf-right {
    transform-origin: left bottom;
    animation: morph-leaf-right var(--animation-duration) var(--animation-timing)
        var(--animation-iteration),
      wiggle var(--animation-duration) var(--animation-timing) 0.2s var(--animation-iteration);
  }
  & #stem {
    animation: morph-stem var(--animation-duration) var(--animation-timing) infinite;
  }
  & #flower {
    animation: morph-flower var(--animation-duration) var(--animation-timing) infinite;
  }
  & #dollar-sign {
    animation: pop-dollar var(--animation-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  }
}

/* --- Winst --- */
@keyframes draw-profit {
  0% {
    stroke-dashoffset: 45;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes move-arrow {
  0% {
    transform: translate(35px, 46px);
    opacity: 1;
  }
  50%,
  100% {
    transform: translate(55px, 34.5px);
    opacity: 1;
  }
}
#winst {
  &:hover #line,
  .agromigo-icon.is-intro & #line {
    animation: draw-profit var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
    stroke-dasharray: 45;
    stroke-dashoffset: 45;
  }
  &:hover #arrow-head,
  .agromigo-icon.is-intro & #arrow-head {
    animation: move-arrow var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
  }
}

/* --- Happy --- */

@keyframes smile-bounce {
  0% {
    d: path('M41,61 Q50,62 59,61');
    transform: translateY(4px);
  }
  80% {
    d: path('M41,61 Q50,76 59,61');
    transform: translateY(0px);
  } /* Overshoot omlaag */
  100% {
    d: path('M41,61 Q50,71 59,61');
  } /* Eindstand */
}

@keyframes sad-bounce {
  0% {
    d: path('M41,65 Q50,64 59,65');
  } /* Horizontaal */
  70% {
    d: path('M41,65 Q50,54 59,65');
  } /* Overshoot omhoog */
  100% {
    d: path('M41,65 Q50,53 59,65');
  } /* Eindstand */
}

@keyframes blink {
  0%,
  90%,
  96%,
  100% {
    transform: scaleY(1);
  }
  93%,
  98% {
    transform: scaleY(0.1);
  }
}

.wp-block-column:hover #happy,
.agromigo-icon.is-intro #happy,
#happy:hover {
  #mouth-happy {
    animation: smile-bounce 0.6s var(--animation-timing) forwards;
  }
  .eye {
    transform-origin: center;
    animation: blink 3s infinite;
  }
}

/* Deprecated hover */
.wp-block-column:hover #deprecated,
.agromigo-icon.is-intro #deprecated,
#deprecated:hover {
  #mouth-sad {
    animation: sad-bounce 0.6s ease-out forwards;
  }
  .eye {
    transform-origin: center;
    animation: blink 3s infinite;
  }
}
/* Trial */
@keyframes draw-dotted {
  0% {
    transform: scaleX(0%);
    stroke-dasharray: 4 16;
  }
  60%,
  100% {
    transform: scaleX(100%);
    stroke-dasharray: 0.8 6;
  }
}

@keyframes move-arrow-head {
  0% {
    transform: translateX(-29px);
  }
  60%,
  100% {
    transform: translateX(0);
  }
}

#trial {
  font-weight: 600;
  #dotted-line {
    stroke-dasharray: 0.8 6;
  }
  #arrow-head {
    transform: translateX(0);
  }
}

.wp-block-column:hover #trial,
.agromigo-icon.is-intro #trial,
#trial:hover {
  & #dotted-line {
    animation: draw-dotted var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
  }
  & #arrow-head {
    animation: move-arrow-head var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
  }
}

/* Reports */
@keyframes reports-grow {
  0% {
    stroke-dashoffset: 40;
  }
  80% {
    stroke-dashoffset: -4;
  } /* Lichte overshoot naar boven */
  100% {
    stroke-dashoffset: 0;
  }
}
#reports {
  .bar {
    stroke-dasharray: 40;
    stroke-dashoffset: 0;
  } /* Basis = zichtbaar */

  &:hover .bar,
  .wp-block-column:hover & .bar,
  .agromigo-icon.is-intro & .bar {
    stroke-dashoffset: 40; /* Start leeg op hover */
    animation: reports-grow 1s ease-out forwards;
  }

  &:hover #left,
  .wp-block-column:hover & #left,
  .agromigo-icon.is-intro & #left {
    animation-delay: 0s;
  }
  &:hover #b2,
  .wp-block-column:hover & #b2,
  .agromigo-icon.is-intro & #b2 {
    animation-delay: 0.1s;
  }
  &:hover #b3,
  .wp-block-column:hover & #b3,
  .agromigo-icon.is-intro & #b3 {
    animation-delay: 0.2s;
  }
  &:hover #b4,
  .wp-block-column:hover & #b4,
  .agromigo-icon.is-intro & #b4 {
    animation-delay: 0.3s;
  }
  &:hover #b5,
  .wp-block-column:hover & #b5,
  .agromigo-icon.is-intro & #b5 {
    animation-delay: 0.4s;
  }
  &:hover #b6,
  .wp-block-column:hover & #b6,
  .agromigo-icon.is-intro & #b6 {
    animation-delay: 0.5s;
  }
  &:hover #right,
  .wp-block-column:hover & #right,
  .agromigo-icon.is-intro & #right {
    animation-delay: 0.6s;
  }
}

/* --- Fruits --- */
@keyframes bounce-fruit {
  0% {
    transform: translateY(22px);
  }
  25% {
    transform: translateY(-4px);
    opacity: 1;
  }
  40% {
    transform: translateY(2px);
    opacity: 1;
  }
  50%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes leaf-wave {
  0%,
  40%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(0deg);
  }
}

.wp-block-column:hover #fruits,
.agromigo-icon.is-intro #fruits,
#fruits:hover {
  & .fruit-front-wrap {
    animation: bounce-fruit var(--animation-duration) ease-in-out infinite;
  }
  & .fruit-back-wrap {
    animation: bounce-fruit var(--animation-duration) ease-in-out infinite;
    animation-delay: 0.15s;
  }

  & .leaves-front {
    transform-origin: 14.8px 10px;
    animation: leaf-wave var(--animation-duration) ease-in-out infinite;
  }
  & .leaves-back {
    transform-origin: 10.7px 7.5px;
    animation: leaf-wave var(--animation-duration) ease-in-out infinite;
    animation-delay: 0.15s;
  }
}

/* --- Cloud --- */
@keyframes float-up {
  0%,
  50%,
  100% {
    transform: translateY(0);
  }
  25%,
  75% {
    transform: translateY(-6px);
  }
}
@keyframes float-down {
  0%,
  50%,
  100% {
    transform: translateY(0);
  }
  25%,
  75% {
    transform: translateY(6px);
  }
}
#cloud {
  stroke: currentColor;
  &:hover #arrow-up,
  .agromigo-icon.is-intro & #arrow-up {
    animation: float-up var(--animation-duration) var(--animation-timing) var(--animation-iteration);
  }
  &:hover #arrow-down,
  .agromigo-icon.is-intro & #arrow-down {
    animation: float-down var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
  }
}

/* --- no-connecton --- */
#no-connection {
  &:hover #sign,
  .agromigo-icon.is-intro & #sign {
    animation: float-down var(--animation-duration) var(--animation-timing)
      var(--animation-iteration);
  }
}

/* ---Gloves --- */
@keyframes dance-front {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(8deg);
  }
}
@keyframes dance-back {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(-8deg);
  }
}
#gloves {
  /* .glove { transform-box: fill-box; transform-origin: bottom center; }
    &:hover #glove-front { animation: dance-front var(--animation-duration) var(--animation-timing) var(--animation-iteration); }
    &:hover #glove-back { animation: dance-back var(--animation-duration) var(--animation-timing) var(--animation-iteration); } */
}

/* Fair */
@keyframes seesaw {
  0% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(8deg);
  }
}
@keyframes scale-left {
  0% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(-4px);
  }
}
@keyframes scale-right {
  0% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(4px);
  }
}

#fair {
  --animation-duration: 0.8s;
  #dwars {
    transform-origin: 49px 28.5px;
  }
}

.wp-block-column:hover #fair,
.agromigo-icon.is-intro #fair,
#fair:hover {
  & #dwars {
    animation: seesaw var(--animation-duration) var(--animation-timing) var(--animation-iteration)
      alternate;
  }
  & #schaal-links {
    animation: scale-left var(--animation-duration) var(--animation-timing)
      var(--animation-iteration) alternate;
  }
  & #schaal-rechts {
    animation: scale-right var(--animation-duration) var(--animation-timing)
      var(--animation-iteration) alternate;
  }
}

/* --- Analyse --- */
@keyframes inspect {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-15px, -5px) rotate(-15deg);
  }
}

.wp-block-column:hover #analyse,
.agromigo-icon.is-intro #analyse,
#analyse:hover {
  #search-tool,
  #mask-search-tool {
    transform-origin: 17.9px 17.9px;
    animation: inspect var(--animation-duration) ease-in-out infinite;
  }
}

/* --- Filtering --- */

.wp-block-column:hover #filtering,
.agromigo-icon.is-intro #filtering,
#filtering {
  @keyframes slide1 {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(20px);
    }
  }
  @keyframes slide2 {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-15px);
    }
  }
  @keyframes slide3 {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(10px);
    }
  }

  & #knob1 {
    animation: slide1 var(--animation-duration) var(--animation-timing) var(--animation-iteration);
  }
  & #knob2 {
    animation: slide2 calc(var(--animation-duration) * 1.2) var(--animation-timing)
      var(--animation-iteration);
  }
  & #knob3 {
    animation: slide3 calc(var(--animation-duration) * 0.8) var(--animation-timing)
      var(--animation-iteration);
  }
}

/*
 * Hover animations for the brand icons the theme does not animate (start,
 * enterprise, grow, seed, care, quality), in the theme's own manner: they play while
 * the card (a column) holding the icon is hovered, as the theme triggers them, line icons draw themselves in as the
 * logo does, and the loop rests before it repeats. The theme's own icon
 * animations (growth, fair, happy, analyse, reports, fruits; 15-theme-icon-animations.css) stay as they are.
 * 17-motion.css switches all of them off for readers who ask for less motion.
 *
 * The icons' element ids repeat across files (`inner` is in several), so
 * every rule is scoped to its icon's own svg id.
 */

.agromigo {
  --agromigo-icon-loop: 2.4s;
  --agromigo-icon-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* A stroke drawn from nothing, then held; --agromigo-dash is at least its length. */
@keyframes agromigo-draw {
  0% {
    stroke-dashoffset: var(--agromigo-dash);
  }
  35%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes agromigo-pop {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.15);
  }
  35%,
  100% {
    transform: scale(1);
  }
}
@keyframes agromigo-twinkle {
  0%,
  100% {
    opacity: 1;
    transform: none;
  }
  15% {
    opacity: 0.15;
    transform: translateY(3px);
  }
  30% {
    opacity: 1;
    transform: none;
  }
}
@keyframes agromigo-quarter-turn {
  0% {
    transform: rotate(0);
  }
  30%,
  100% {
    transform: rotate(90deg);
  }
}

/* Start: three small greenhouses go up one after another, each with its stroke. */
.wp-block-column:hover #start path,
.agromigo-icon.is-intro #start path,
#start:hover path {
  --agromigo-dash: 80;
  stroke-dasharray: var(--agromigo-dash);
  animation: agromigo-draw var(--agromigo-icon-loop) ease-in-out infinite backwards;
}
.wp-block-column:hover #start line,
.agromigo-icon.is-intro #start line,
#start:hover line {
  --agromigo-dash: 14;
  stroke-dasharray: var(--agromigo-dash);
  animation: agromigo-draw var(--agromigo-icon-loop) ease-in-out infinite backwards;
}
#start #inner-copy-2 {
  animation-delay: 0.15s;
}
#start #inner-copy {
  animation-delay: 0.3s;
}
#start #hyphen-copy-2 {
  animation-delay: 0.45s;
}
#start #hyphen-copy {
  animation-delay: 0.6s;
}
#start #hyphen-copy-3 {
  animation-delay: 0.75s;
}

/* Enterprise: the three nested outlines build up as the logo does. */
.wp-block-column:hover #enterprise :is(path, line),
.agromigo-icon.is-intro #enterprise :is(path, line),
#enterprise:hover :is(path, line) {
  --agromigo-dash: 150;
  stroke-dasharray: var(--agromigo-dash);
  animation: agromigo-draw var(--agromigo-icon-loop) ease-in-out infinite backwards;
}
#enterprise #center {
  animation-delay: 0.15s;
}
#enterprise #inner {
  animation-delay: 0.3s;
}
#enterprise #hyphen {
  --agromigo-dash: 14;
  animation-delay: 0.5s;
}

/* Grow: the stem rises, then the leaves open one by one. */
#grow path:not(#stem) {
  transform-box: fill-box;
  transform-origin: center;
}
.wp-block-column:hover #grow #stem,
.agromigo-icon.is-intro #grow #stem,
#grow:hover #stem {
  --agromigo-dash: 60;
  stroke-dasharray: var(--agromigo-dash);
  animation: agromigo-draw var(--agromigo-icon-loop) ease-in-out infinite backwards;
}
.wp-block-column:hover #grow path:not(#stem),
.agromigo-icon.is-intro #grow path:not(#stem),
#grow:hover path:not(#stem) {
  animation: agromigo-pop var(--agromigo-icon-loop) var(--agromigo-icon-bounce) infinite backwards;
}
#grow path:not(#stem):nth-child(1) {
  animation-delay: 0.35s;
}
#grow path:not(#stem):nth-child(2) {
  animation-delay: 0.5s;
}
#grow path:not(#stem):nth-child(3) {
  animation-delay: 0.65s;
}
#grow path:not(#stem):nth-child(4) {
  animation-delay: 0.8s;
}
#grow path:not(#stem):nth-child(5) {
  animation-delay: 0.95s;
}

/* Seed: the scattered seeds twinkle in three waves. */
#seed line {
  transform-box: fill-box;
}
.wp-block-column:hover #seed line,
.agromigo-icon.is-intro #seed line,
#seed:hover line {
  animation: agromigo-twinkle var(--agromigo-icon-loop) ease-in-out infinite;
}
#seed line:nth-child(3n + 2) {
  animation-delay: 0.2s;
}
#seed line:nth-child(3n) {
  animation-delay: 0.4s;
}

/* Care: the cross and its corners turn a quarter, settling with a bounce. */
#care .st {
  transform-origin: 50px 50px;
}
.wp-block-column:hover #care .st,
.agromigo-icon.is-intro #care .st,
#care:hover .st {
  animation: agromigo-quarter-turn var(--agromigo-icon-loop) var(--agromigo-icon-bounce) infinite;
}

/* Quality: the camera's lens focuses, the produce in it pops into view, the
   check beside it draws itself and the flash blinks. */
@keyframes agromigo-focus {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(0.86);
  }
  30% {
    transform: scale(1.04);
  }
  40% {
    transform: scale(1);
  }
}
#quality :is(#lens, #produce, #leaf, #flash) {
  transform-box: fill-box;
  transform-origin: center;
}
.wp-block-column:hover #quality #lens,
.agromigo-icon.is-intro #quality #lens,
#quality:hover #lens {
  animation: agromigo-focus var(--agromigo-icon-loop) ease-in-out infinite;
}
.wp-block-column:hover #quality :is(#produce, #leaf),
.agromigo-icon.is-intro #quality :is(#produce, #leaf),
#quality:hover :is(#produce, #leaf) {
  animation: agromigo-pop var(--agromigo-icon-loop) var(--agromigo-icon-bounce) infinite backwards;
  animation-delay: 0.25s;
}
.wp-block-column:hover #quality #check,
.agromigo-icon.is-intro #quality #check,
#quality:hover #check {
  --agromigo-dash: 22;
  stroke-dasharray: var(--agromigo-dash);
  animation: agromigo-draw var(--agromigo-icon-loop) ease-in-out infinite backwards;
  animation-delay: 0.5s;
}
.wp-block-column:hover #quality #flash,
.agromigo-icon.is-intro #quality #flash,
#quality:hover #flash {
  animation: agromigo-twinkle var(--agromigo-icon-loop) ease-in-out infinite;
  animation-delay: 0.1s;
}

/* The intro: site.js adds .is-intro to an icon once, the first time it comes
   into view, and every icon above also animates for it. Hover loops; the
   intro plays each animation one cycle and stops at rest. Fair's seesaw
   alternates, so it needs two cycles to come back level. Hover takes over
   again the moment the class is gone. */
.agromigo-icon.is-intro svg,
.agromigo-icon.is-intro svg * {
  animation-iteration-count: 1 !important;
}
.agromigo-icon.is-intro #fair * {
  animation-iteration-count: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
  .agromigo *,
  .agromigo *::before,
  .agromigo *::after {
    transition: none !important;
  }
  /* The theme's icon and logo animations play on hover; not for readers who
     asked for less motion. */
  .agromigo svg,
  .agromigo svg * {
    animation: none !important;
  }
}