/* Separate approach cards with the same forest/cream reversal as planning. */
#approach .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:48px;background:transparent;border:0}
#approach .steps article{padding:36px;border:3px solid #173f39;background:#173f39;color:#fffdf8;min-width:0;transition:background-color .2s,color .2s}
#approach .steps article :is(.number,h3,p){color:inherit}
#approach .steps .number{margin-bottom:28px;line-height:1.2}
#approach .steps h3{font:400 clamp(28px,2.8vw,38px)/1.2 var(--serif);margin:0 0 24px}
#approach .steps p{font-size:18px;line-height:1.85;margin:0;max-width:60ch}
#approach .steps article:focus-visible{background:#f2eddf;color:#173f39;outline:3px solid #173f39;outline-offset:5px}
@media(hover:hover){#approach .steps article:hover{background:#f2eddf;color:#173f39}}
@media(max-width:900px){#approach .steps{grid-template-columns:1fr;gap:24px}}
@media(max-width:600px){#approach .steps article{padding:28px}}
@media(prefers-reduced-motion:reduce){#approach .steps article{transition:none}}