/* How to Work With Us — assets/css/how-to-work-with-us.css
   Loaded only on /how-to-work-with-us/ (inc/routes.php -> zeroy_enqueue_page_style('how-to-work-with-us')).
   The page states no figure at all — no days, metres, MOQ or prices — so nothing here is sized around a number.
   Mobile first; every colour, size and space comes from a var() token in tokens.css. */

/* --- 1. hero ------------------------------------------------------------ */
.flow-hero{padding-block:var(--section-y-tight) var(--section-y)}
.flow-hero h1{max-width:22ch}
.flow-hero .lead{max-width:62ch;margin-bottom:var(--space-5)}

/* --- section head shared by every band ---------------------------------- */
.flow-head{max-width:var(--wrap-narrow);margin-bottom:var(--space-6)}
.flow-head h2{max-width:32ch}
.flow-head .lead{margin-top:var(--space-2)}

/* --- 2. the path: ten steps, numbered in the order they happen ---------- */
.flow-steps{counter-reset:flow-step;list-style:none;margin:0;padding:0}
.flow-step{
  counter-increment:flow-step;
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  align-items:start;
  column-gap:var(--space-3);
  margin:0;
  padding-block:var(--space-5);
  border-bottom:var(--border-hair)}
.flow-step:first-child{padding-top:0}
.flow-step:last-child{padding-bottom:0;border-bottom:0}
.flow-step::before{
  content:counter(flow-step,decimal-leading-zero);
  grid-column:1;
  grid-row:1;
  font-size:var(--fs-small);
  color:var(--c-ink-mute);
  font-variant-numeric:tabular-nums}
.flow-step__name,
.flow-step__what,
.flow-step__io{grid-column:2}
.flow-step__name{margin-bottom:var(--space-3)}

/* what you send / what comes back: one dt-dd pair, stacked on a phone ---- */
.flow-step__io{
  display:grid;
  grid-template-columns:1fr;
  align-items:baseline;
  row-gap:var(--space-1);
  column-gap:var(--space-4);
  margin:0;
  max-width:var(--measure)}
.flow-step__io dt{
  margin:0;
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-ink-mute)}
.flow-step__io dd{margin:0 0 var(--space-4);color:var(--c-ink-soft)}
.flow-step__io dd:last-child{margin-bottom:0}

/* --- 3. two things that set the pace ------------------------------------ */
.flow-pace__cards{margin-top:var(--space-6)}
.flow-pace__cards .card h3,
.flow-after__cards .card h3{margin-bottom:var(--space-2)}
.flow-pace__cards .card p:last-child,
.flow-after__cards .card p:last-child{margin-bottom:0}

/* --- 4. what is confirmed with the order -------------------------------- */
.flow-terms__list{list-style:none;margin:0;padding:0;max-width:var(--measure);display:grid;gap:var(--space-4)}
.flow-terms__list li{position:relative;margin:0;padding-left:1.25rem}
.flow-terms__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--c-accent)}
.flow-terms__note{margin-top:var(--space-5)}

/* --- 5. after the goods arrive ------------------------------------------ */
.flow-after__cards{margin-top:var(--space-6)}

/* --- 6. closing call to action ----------------------------------------- */
.flow-cta__inner{display:grid;gap:var(--space-6);align-items:start}
.flow-cta__copy h2{max-width:28ch;margin-bottom:var(--space-4)}
.flow-cta__copy .lead{max-width:54ch}
.flow-cta__copy .btn-row{margin-top:var(--space-2)}
.flow-cta__ghost{border-color:var(--c-on-ink-line);color:var(--c-on-ink)}
.flow-cta__ghost:hover{border-color:var(--c-on-ink);color:var(--c-on-ink);background:var(--c-on-ink-line)}
.flow-cta__contact{border-top:1px solid var(--c-on-ink-line);padding-top:var(--space-5)}
.flow-cta__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-3);font-size:var(--fs-small)}
.flow-cta__line:last-child{margin-bottom:0}
.flow-cta__label{
  min-width:8rem;
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-on-ink-mute)}
.flow-cta__contact a{color:var(--c-on-ink)}

/* --- from 640px: the number column widens, dt becomes a label column ---- */
@media (min-width:640px){
  .flow-step{grid-template-columns:3rem minmax(0,1fr)}
  .flow-step__io{grid-template-columns:7rem minmax(0,1fr);row-gap:var(--space-3)}
  .flow-step__io dd{margin-bottom:0}
  .flow-cta__line{flex-wrap:nowrap}
}

/* --- from 900px: more room, three-column bands, a two-column CTA -------- */
@media (min-width:900px){
  .flow-hero{padding-block:var(--section-y)}
  .flow-step{padding-block:var(--space-6);column-gap:var(--space-5)}
  .flow-pace__cards,
  .flow-after__cards{gap:var(--space-6)}
  .flow-after__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flow-cta__inner{grid-template-columns:1.15fr .85fr;gap:var(--space-7)}
  .flow-cta__contact{border-top:0;padding-top:0}
  .flow-cta__contact a{text-decoration-color:var(--c-on-ink-line)}
}