/* "How we roll" — yellow section. The step headers are sticky, so they stack up under each
   other as you scroll past the steps. */
#workflow{background:var(--yellow);color:var(--on-yellow)}
.flow{position:relative;padding-bottom:12svh;--hh:clamp(4rem,9vh,6rem)}
.flow__head{position:sticky;top:calc(var(--i) * var(--hh));z-index:2;height:var(--hh);width:100%;display:flex;align-items:center;gap:1rem;padding:0 var(--gutter);background:var(--yellow);color:var(--on-yellow);border:0;border-top:1px solid var(--on-yellow);text-align:left;cursor:pointer}
.flow__num{font-family:var(--font-display);font-size:clamp(1.4rem,3.4vw,3.2rem);width:2.4ch;flex:none;font-variant-numeric:tabular-nums}
.flow__title{font-size:clamp(1.8rem,4vw,3.8rem);letter-spacing:.01em;line-height:1;text-transform:uppercase}
.flow__toggle{margin-left:auto;width:1.4rem;height:1.4rem;position:relative;flex:none}
.flow__toggle::before,.flow__toggle::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;background:currentColor;transition:transform .5s var(--ease)}
.flow__toggle::after{transform:rotate(90deg)}
.flow__head[aria-expanded="true"] .flow__toggle::after{transform:rotate(0)}
.flow__body{min-height:50svh;overflow:hidden;padding:clamp(1.5rem,4vw,3rem) var(--gutter) clamp(3rem,8vw,6rem);display:grid;grid-template-columns:2.4ch 1fr;column-gap:1rem}
.flow__body p{grid-column:2;max-width:34ch;font-size:clamp(1.3rem,2.4vw,2.3rem);line-height:1.2;letter-spacing:.02em;color:var(--on-yellow);text-transform:none;text-wrap:pretty}
@media (max-width:720px){.flow__body{grid-template-columns:1fr}.flow__body p{grid-column:1}}