/* ==========================================================================
 * Site v3: process steps as a journey (template-parts/v3/journey.php).
 * Used by the showroom "Our process" and How it works "Process" blocks.
 * Desktop: one row of stops joined by a line. Tablet: two rows of three.
 * Phones: a vertical line down the left, top to bottom. Never sideways.
 * No focus styles, by agency rule.
 * ======================================================================== */
.v3-journey{--j-node:48px;--j-gap:28px;padding:56px 0;color:var(--v3-ink)}
.v3-journey--paper{background:var(--v3-paper)}
.v3-journey--white{background:#fff}
@media(min-width:1024px){.v3-journey{padding:72px 0}}
.v3-journey__wrap{box-sizing:border-box;width:100%;max-width:1360px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.v3-journey__wrap{padding:0 40px}}

.v3-journey__head{max-width:720px;margin:0 auto 40px;text-align:center}
@media(min-width:1024px){
  .v3-journey__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;max-width:1200px;margin-bottom:48px;text-align:left}
  .v3-journey__intro{max-width:680px}
}
.v3-journey__eyebrow{margin:0 0 12px;font:500 13px/1.3 var(--v3-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--v3-olive)}
.v3-journey__title{margin:0;font:400 clamp(34px,4vw,54px)/1.05 var(--v3-serif);letter-spacing:-.01em;color:var(--v3-ink);text-wrap:balance}
.v3-journey__lede{margin-top:16px;font-size:17px;line-height:1.55;color:var(--v3-ink)}
.v3-journey__lede p{margin:0;text-wrap:pretty}

.v3-journey__steps{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;list-style:none;counter-reset:none}
.v3-journey__step{position:relative;display:grid;grid-template-columns:var(--j-node) minmax(0,1fr);gap:0 20px;padding-bottom:32px}
.v3-journey__step:last-child{padding-bottom:0}
/* The line: from under each stop to the next one. */
.v3-journey__step:not(:last-child)::after{content:"";position:absolute;left:calc(var(--j-node)/2 - .5px);top:var(--j-node);bottom:0;width:1px;background:var(--v3-olive);opacity:.45}

.v3-journey__node{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--j-node);height:var(--j-node);border:1px solid var(--v3-olive);border-radius:50%;background:inherit;color:var(--v3-olive)}
.v3-journey--paper .v3-journey__node{background:var(--v3-paper)}
.v3-journey--white .v3-journey__node{background:#fff}
.v3-journey__node-num{font:500 18px/1 var(--v3-sans)}
.v3-journey__icon{display:block}
/* The last stop is the finished kitchen: solid olive ring. */
.v3-journey__step:last-child .v3-journey__node{border-width:2px}

.v3-journey__body{padding-top:4px}
.v3-journey__num{margin:0 0 6px;font:500 13px/1.3 var(--v3-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--v3-olive)}
.v3-journey__step-title{margin:0;font:500 20px/1.3 var(--v3-sans);letter-spacing:-.005em;color:var(--v3-ink);text-wrap:balance}
.v3-journey__text{margin-top:8px;font-size:16px;line-height:1.55;color:var(--v3-ink-2)}
.v3-journey__text p{margin:0;text-wrap:pretty}
.v3-journey__text p+p{margin-top:8px}

/* Tablet: two rows of three, the line runs along each row. */
@media(min-width:768px){
  .v3-journey__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--j-gap)}
  .v3-journey__step{display:block;padding:0}
  .v3-journey__step:not(:last-child)::after{left:calc(var(--j-node) + 12px);right:calc(-1 * var(--j-gap) + 12px);top:calc(var(--j-node)/2 - .5px);bottom:auto;width:auto;height:1px}
  .v3-journey__step:nth-child(3n)::after{display:none}
  .v3-journey__body{padding-top:16px}
}
/* Desktop: two rows of three, wide enough for the longer steps to read evenly. */
@media(min-width:1024px){
  .v3-journey__steps{gap:44px 48px;max-width:1200px;margin:0 auto}
  .v3-journey__step:not(:last-child)::after{right:calc(-1 * 48px + 12px)}
  .v3-journey__text{max-width:36ch}
}
.v3-journey__cta{display:flex;justify-content:center;margin-top:28px}
@media(min-width:1024px){.v3-journey__cta{margin:0}}