/* ==========================================================================
   feilding.css — /ai-automation-feilding (2026-09-29). Builds on
   palmerston-north.css (pn-*) and services-paths.css (sp-*). Prefix .fd-*.
   Motion follows the same rule: html.nx-js gates the "before" state.
   ========================================================================== */

/* Who we help: six cards */
.fd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.fd-card {
  padding: 24px 24px 26px;
  border: 1px solid var(--nx-line);
  border-radius: 20px;
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-soft);
  transition: transform var(--nx-t-base) var(--nx-ease-out), box-shadow var(--nx-t-base) var(--nx-ease-out);
}
.fd-card:hover { transform: translateY(-4px); box-shadow: var(--nx-shadow-lift); }
.fd-card svg {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 12px;
  background: var(--nx-orange-tint);
  fill: none;
  stroke: var(--nx-orange-dark);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fd-card h3 { margin: 0 0 8px; color: var(--nx-ink); font-size: 1.1rem; font-weight: 800; }
.fd-card p { margin: 0; color: var(--nx-ink-soft); font-size: .95rem; line-height: 1.6; }

/* The year: four seasons, each with the fix that lands on it */
.fd-year {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fd-season {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid var(--nx-line);
  border-radius: 20px;
  background: var(--nx-surface);
}
.fd-season__name {
  align-self: flex-start;
  margin-bottom: 14px;
  color: var(--nx-orange-dark);
  font-size: var(--nx-text-label);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fd-season h3 { margin: 0 0 6px; color: var(--nx-ink); font-size: 1.1rem; font-weight: 800; }
.fd-season p { flex: 1; margin: 0 0 16px; color: var(--nx-ink-soft); font-size: .94rem; line-height: 1.6; }
.fd-season__fix {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--nx-navy);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.4;
}
.fd-season__fix::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--nx-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

html.nx-js .fd-year .fd-season { opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--nx-ease-out), transform 500ms var(--nx-ease-out); }
html.nx-js .fd-year.is-in .fd-season { opacity: 1; transform: none; }
html.nx-js .fd-year .fd-season__fix { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity 420ms var(--nx-ease-out), transform 420ms var(--nx-ease-out); }
html.nx-js .fd-year.is-in .fd-season__fix { opacity: 1; transform: none; }
html.nx-js .fd-year.is-in .fd-season:nth-child(2) { transition-delay: 140ms; }
html.nx-js .fd-year.is-in .fd-season:nth-child(3) { transition-delay: 280ms; }
html.nx-js .fd-year.is-in .fd-season:nth-child(4) { transition-delay: 420ms; }
html.nx-js .fd-year.is-in .fd-season:nth-child(1) .fd-season__fix { transition-delay: 700ms; }
html.nx-js .fd-year.is-in .fd-season:nth-child(2) .fd-season__fix { transition-delay: 860ms; }
html.nx-js .fd-year.is-in .fd-season:nth-child(3) .fd-season__fix { transition-delay: 1020ms; }
html.nx-js .fd-year.is-in .fd-season:nth-child(4) .fd-season__fix { transition-delay: 1180ms; }

.fd .pn-honest { margin-top: clamp(40px, 6vw, 56px); }

@media (max-width: 1023px) {
  .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .fd-grid, .fd-year { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-card { transition: none; }
}