.cycle-figure { --graphic-bronze: #96703f; }
.cycle-diagram { container-type: inline-size; }
.cycle-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); }
.cycle-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(88px, 10vw, 130px);
  padding: 8px 2px;
  border: 1px solid #dcd4c4;
  background: #f6f4ef;
  color: var(--ink);
  text-align: center;
}
.cycle-node:nth-child(2) { background: var(--ink); color: #fff; border-color: var(--ink); }
.cycle-node:nth-child(3) { background: #eee4d3; }
.cycle-node > span { color: var(--graphic-bronze); font-size: 10px; font-weight: 600; letter-spacing: .13em; }
.cycle-node:nth-child(2) > span { color: #e1c397; }
.cycle-node strong { font: 600 clamp(10px, 3.6cqw, 19px)/1.22 var(--serif); }
.cycle-node:not(:last-child)::after {
  content: '›';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(100% + clamp(5px, 1vw, 11px));
  transform: translate(-50%, -54%);
  color: var(--graphic-bronze);
  font: 23px/1 var(--sans);
}
.cycle-return { display: block; width: 100%; overflow: visible; }
.cycle-return path { fill: none; stroke: #a88655; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cycle-return .cycle-trace { opacity: 0; stroke: #765224; stroke-width: 3; }
.cycle-figure figcaption { margin-top: 6px; }
.motion-graphic { --motion-state: paused; --motion-period: 5.6s; }
.motion-graphic.is-playing { --motion-state: running; }
.motion-control { display: block; min-height: 36px; margin: 10px auto 0; padding: 5px 10px; border: 0; background: transparent; color: #72522e; font-size: 11px; }
.motion-control[hidden] { display: none; }
.motion-control:hover { text-decoration: underline; }
.motion-control span { display: inline-block; width: 14px; font-size: 14px; }
.cycle-node { animation: cycle-emphasis var(--motion-period) ease-in-out infinite var(--motion-state); }
.cycle-node:nth-child(2) { animation-delay: .9s; }
.cycle-node:nth-child(3) { animation-delay: 1.8s; }
.cycle-return .cycle-trace { stroke-dasharray: 1; animation: cycle-flow var(--motion-period) ease-in-out infinite var(--motion-state); }
@keyframes cycle-emphasis {
  0%, 18%, 100% { box-shadow: 0 0 0 0 transparent; }
  6%, 12% { box-shadow: 0 0 0 3px var(--bronze), 0 5px 15px #14264120; }
}
@keyframes cycle-flow {
  0%, 47% { opacity: 0; stroke-dashoffset: 1; }
  49% { opacity: 1; stroke-dashoffset: 1; }
  73%, 82% { opacity: 1; stroke-dashoffset: 0; }
  92%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

.funnel-graphic { display: block; width: 100%; height: auto; }
.funnel-graphic text { text-anchor: middle; }
.funnel-guide { fill: none; stroke: #96703f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.funnel-band-one { fill: var(--ink); }
.funnel-band-two { fill: #3e5069; }
.funnel-band-three { fill: #e8dac3; }
.funnel-light { fill: #fff; }
.funnel-dark, .funnel-endpoint { fill: var(--ink); }
.funnel-endpoint, .funnel-stage { font: 600 13px var(--sans); letter-spacing: 2px; }
.funnel-light .funnel-stage { fill: #efd5ad; }
.funnel-title { font: 600 22px var(--serif); }
.funnel-title-small { font-size: 18px; }
.funnel-band { stroke: transparent; stroke-width: 4; stroke-linejoin: round; animation: funnel-emphasis var(--motion-period) ease-in-out infinite var(--motion-state); }
.funnel-band-two { animation-delay: 1.05s; }
.funnel-band-three { animation-delay: 2.1s; }
.funnel-exit { animation: funnel-arrow var(--motion-period) ease-in-out infinite var(--motion-state); }
.funnel-outcome { animation: funnel-outcome var(--motion-period) ease-in-out infinite var(--motion-state); }
@keyframes funnel-emphasis {
  0%, 20%, 100% { stroke: transparent; }
  6%, 14% { stroke: var(--bronze); }
}
@keyframes funnel-arrow {
  0%, 53%, 88%, 100% { stroke-width: 2; }
  64%, 78% { stroke-width: 4; }
}
@keyframes funnel-outcome {
  0%, 57%, 91%, 100% { fill: var(--ink); }
  69%, 82% { fill: #72522e; }
}

.process-steps.stage-graphic { gap: 21px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process-steps.stage-graphic li { position: relative; border: 1px solid #dcd5c8; padding: 20px 15px 18px; background: var(--paper); }
.process-steps.stage-graphic li::before { content: none; }
.process-steps.stage-graphic li:not(:last-child)::after {
  content: '→'; position: absolute; z-index: 1; right: -22px; top: 31px;
  width: 21px; color: #96703f; font-size: 18px; line-height: 1; text-align: center;
}
.stage-symbol { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: #f0d7af; }
.stage-symbol svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stage-number { display: block; margin-top: 17px; color: #72522e; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.process-steps.stage-graphic h3 { margin: 5px 0 10px; font-size: clamp(20px, 2vw, 27px); }
.process-steps.stage-graphic p { margin: 0; max-width: none; font-size: 13px; }

@media (max-width: 950px) {
  .process-steps.stage-graphic { grid-template-columns: 1fr; gap: 19px; }
  .process-steps.stage-graphic li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 16px; padding: 16px; }
  .process-steps.stage-graphic li:not(:last-child)::after { content: '↓'; left: 27px; right: auto; top: auto; bottom: -20px; }
  .stage-number { margin-top: 0; }
  .process-steps.stage-graphic h3 { font-size: 24px; }
}
@media (max-width: 520px) {
  .cycle-nodes { gap: 10px; }
  .cycle-node strong { font-size: clamp(9px, 2.75vw, 14px); }
  .cycle-node:not(:last-child)::after { left: calc(100% + 5px); font-size: 17px; }
  .cycle-figure figcaption { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cycle-node, .cycle-return .cycle-trace, .funnel-band, .funnel-exit, .funnel-outcome { animation: none; }
  .motion-control { display: none; }
}