/* The process remains a readable ordered sequence without JavaScript. */
.coffee-process-section { background: var(--paper); }
.coffee-process-heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 64px; margin-bottom: 46px; }
.coffee-process-heading .eyebrow { margin-bottom: 20px; }
.coffee-process-heading .section-title { max-width: 18ch; }
.coffee-process-heading .lede { max-width: 440px; margin: 0 0 4px; font-size: 1rem; }
.coffee-flow { --flow-gap: 36px; --flow-row-gap: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; column-gap: var(--flow-gap); row-gap: var(--flow-row-gap); padding: 0; margin: 0; list-style: none; }
.coffee-flow > li { position: relative; min-width: 0; min-height: 218px; padding: 24px 22px; border: 1px solid var(--line-strong); background: var(--white); }
.coffee-flow > li:nth-child(5) { grid-column: 4; grid-row: 2; }
.coffee-flow > li:nth-child(6) { grid-column: 3; grid-row: 2; }
.coffee-flow > li:nth-child(7) { grid-column: 2; grid-row: 2; }
.coffee-flow > li:nth-child(8) { grid-column: 1; grid-row: 2; }
.coffee-flow-number { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 22px; color: var(--gold); font-size: .75rem; line-height: 1.3; letter-spacing: .09em; font-weight: 600; text-transform: uppercase; }
.coffee-flow-number > span { color: var(--green); font-size: .65rem; letter-spacing: .08em; }
.coffee-flow h3 { margin: 0; min-height: 2.65em; font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
.coffee-flow p { margin: 13px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.65; }
.coffee-flow > .coffee-flow-drying { border-top: 2px solid var(--green); padding-top: 23px; background: var(--green-soft); }
.coffee-flow > .coffee-flow-output { background: var(--paper-2); border-color: transparent; }
.coffee-flow-output .coffee-flow-number { color: var(--muted); font-size: .65rem; }
.coffee-flow-output h3 { color: var(--green); }
.coffee-flow-arrow { position: absolute; z-index: 1; left: calc(100% + 2px); top: 50%; display: block; width: 32px; height: 14px; overflow: visible; transform: translateY(-50%); color: #7a8c7f; pointer-events: none; }
.coffee-flow-arrow path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.coffee-flow > li:nth-child(4) .coffee-flow-arrow { left: 50%; top: calc(100% + 22px); transform: translate(-50%, -50%) rotate(90deg); }
.coffee-flow > li:nth-child(n+5) .coffee-flow-arrow { left: auto; right: calc(100% + 2px); transform: translateY(-50%) rotate(180deg); }
@media (max-width: 1050px) and (min-width: 901px) {
  .coffee-flow { --flow-gap: 28px; }
  .coffee-flow > li { padding-inline: 16px; }
  .coffee-flow h3 { font-size: 1.05rem; }
  .coffee-flow p { font-size: .8rem; }
  .coffee-flow-arrow { width: 24px; }
}
@media (max-width: 900px) {
  .coffee-process-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 30px; }
  .coffee-process-heading .eyebrow { line-height: 1.5; margin-bottom: 15px; }
  .coffee-process-heading .section-title { font-size: 2.15rem; }
  .coffee-process-heading .lede { max-width: none; font-size: .95rem; }
  .coffee-flow { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 28px; }
  .coffee-flow > li, .coffee-flow > li:nth-child(n+5) { grid-column: auto; grid-row: auto; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; min-height: 0; padding: 20px; }
  .coffee-flow-number { grid-column: 1; grid-row: 1 / span 2; display: block; margin: 3px 0 0; font-size: .72rem; }
  .coffee-flow-number > span { display: none; }
  .coffee-flow h3 { grid-column: 2; min-height: 0; font-size: 1.12rem; }
  .coffee-flow h3 br { display: none; }
  .coffee-flow p { grid-column: 2; margin-top: 8px; font-size: .875rem; }
  .coffee-flow > li.coffee-flow-drying { padding-top: 19px; }
  .coffee-flow > li.coffee-flow-output { display: block; padding: 22px 20px 22px 64px; }
  .coffee-flow-output .coffee-flow-number { margin: 0 0 10px; }
  .coffee-flow-arrow, .coffee-flow > li:nth-child(4) .coffee-flow-arrow, .coffee-flow > li:nth-child(n+5) .coffee-flow-arrow { left: 50%; right: auto; top: calc(100% + 14px); width: 24px; height: 14px; transform: translate(-50%, -50%) rotate(90deg); }
}