/* Four related line motifs: focus, narrative, making and alignment. */
main#main .process-grid{gap:22px;align-items:stretch}
main#main .process-step{position:relative;isolation:isolate;overflow:hidden;min-width:0;padding:28px 24px 24px;border:1px solid var(--step-line);background:var(--step-paper);border-radius:0;transform:none}
main#main .process-step-understand{--step-ink:#fff;--step-line:#2451db;--step-paper:#2451db;--step-text:#fff}
main#main .process-step-develop{--step-ink:#222018;--step-line:#ffca2c;--step-paper:#ffca2c;--step-text:#222018}
main#main .process-step-create{--step-ink:#251c1a;--step-line:#ff7058;--step-paper:#ff7058;--step-text:#251c1a}
main#main .process-step-deliver{--step-ink:#fff;--step-line:#007c5a;--step-paper:#007c5a;--step-text:#fff}
main#main .process-motif{position:absolute;right:-20px;top:-12px;width:220px;height:184px;color:var(--step-ink);opacity:.27;z-index:-1;pointer-events:none}
main#main .process-step>span{display:block;font-size:.8125rem;line-height:1.5;letter-spacing:.1em;color:var(--step-ink);font-weight:500}
main#main .process-step h3{font-size:var(--type-card);margin:30px 0 18px;line-height:1.2}
main#main .process-step p{font-size:var(--type-body);line-height:1.7;margin:0;color:var(--step-text)}
@media(max-width:620px){main#main .process-grid{gap:18px}main#main .process-step{padding:25px 24px}main#main .process-step h3{margin-top:20px}main#main .process-motif{width:210px;height:175px;right:-8px;opacity:.27}}

main#main .process-step h3{color:var(--step-text)}