/* Production sequence
   One continuous rail. Parallel work sits in a framed group: a fork bar splits
   the rail into lanes, a merge bar joins every lane again, so nothing dead-ends.
   Lane connectors are drawn as a centred 2px background on each list item and
   hidden behind the opaque boxes, so lines always meet the boxes exactly.
   Desktop (>=900px): centred spine. Mobile: one left rail with ticks. */
.production-sequence{--rail:#56715f;--edge:#c3cbc4;--gap:34px;padding:clamp(64px,8vw,112px) var(--pad);scroll-margin-top:var(--hdr);border-top:1px solid var(--line)}
.sequence-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;max-width:980px;margin:0 auto 64px}
.sequence-intro .h2{max-width:16ch}.sequence-intro .sub{max-width:44ch;justify-self:end}
.seq{max-width:980px;margin:0 auto}
.seq-phase{position:relative}
.seq-steps{display:flex;flex-direction:column;min-width:0}
.seq-step{position:relative;min-width:0}

/* Phase heading */
.seq-head{display:flex;align-items:center;gap:14px;height:44px;margin-bottom:22px;position:relative;z-index:1}
.seq-num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--green);color:var(--on-green);font:500 13px/1 var(--text);letter-spacing:.02em;flex:none}
.seq-head h3{font:500 clamp(1.35rem,2.1vw,1.85rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--green)}

/* Boxes */
.seq-box{position:relative;z-index:1;padding:15px 20px;border:1px solid var(--edge);border-radius:8px;background:var(--white);color:var(--ink);font-size:16px;line-height:1.4;text-align:center;text-wrap:balance;box-shadow:0 1px 0 rgba(16,32,26,.04),0 12px 24px -20px rgba(16,32,26,.5)}
.seq-key>.seq-box{background:var(--green);border-color:var(--green);color:var(--on-green);font-weight:500}
/* arrowhead into every box except the very first */
.seq-box:after{content:"";position:absolute;top:-9px;left:calc(50% - 6px);border:6px solid transparent;border-bottom:0;border-top:8px solid var(--rail)}
.seq-phase:first-child .seq-steps>.seq-step:first-child>.seq-box:after{display:none}
.seq-detail{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.seq-detail span{padding:5px 10px;border-radius:999px;background:var(--paper-2);color:var(--ink);font-size:13.5px;line-height:1.35}

/* Group frame */
.seq-frame{position:relative;border:1px solid var(--edge);border-radius:14px;background:var(--paper-2);padding:0 20px}
.seq-tag{position:absolute;top:15px;left:20px;font:600 12.5px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}

/* Lanes: each item carries the centred connector */
.seq-lane{position:relative;display:flex;flex-direction:column;min-width:0}
.seq-lane>li{position:relative;min-width:0;padding-top:22px;background:linear-gradient(var(--rail),var(--rail)) no-repeat center/2px 100%}
.seq-lane>li:first-child{padding-top:18px}
.seq-lane>li:last-child{flex-grow:1;padding-bottom:24px}
.seq-lane>li.seq-nest{background:none;padding:0}

/* Fork: stem in, bar, lanes, bar, stem out */
.seq-fork{position:relative;display:grid;gap:16px;padding:22px 0 18px}
.seq-fork:before,.seq-fork:after{content:"";position:absolute;left:calc(50% - 1px);width:2px;background:var(--rail)}
.seq-fork:before{top:0;height:22px}.seq-fork:after{bottom:0;height:18px}
.seq-fork>.seq-lane:before,.seq-fork>.seq-lane:after{content:"";position:absolute;left:-9px;right:-9px;height:2px;background:var(--rail)}
.seq-fork>.seq-lane:before{top:-1px}.seq-fork>.seq-lane:after{bottom:-1px}
.seq-fork>.seq-lane:first-child:before,.seq-fork>.seq-lane:first-child:after{left:50%}
.seq-fork>.seq-lane:last-child:before,.seq-fork>.seq-lane:last-child:after{right:50%}
.seq-top{padding:48px 0 30px}.seq-top:before{height:48px}.seq-top:after{height:30px}
.seq-materials-lanes{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.seq-sub{grid-template-columns:repeat(2,minmax(0,1fr))}
.seq-sub .seq-box{min-height:76px;display:grid;place-items:center}
.seq-routes-lanes{grid-template-columns:repeat(4,minmax(0,1fr))}
.seq-routes .seq-box{padding:15px 12px}

/* Sampling loop with a drawn return arrow */
.seq-loopwrap{position:relative;display:flex;justify-content:center}
.seq-lane-loop{width:300px}
.seq-lane-loop>li:first-child{padding-top:46px}.seq-lane-loop>li:last-child{padding-bottom:26px}
.seq-lane-loop .seq-box{min-height:54px;display:grid;place-items:center}
.seq-lane-loop>li:last-child>.seq-box:before{content:"";position:absolute;right:-30px;bottom:50%;width:30px;height:calc(100% + 22px);border:2px solid var(--rail);border-left:0;border-radius:0 12px 12px 0}
.seq-lane-loop>li:first-child>.seq-box:before{content:"";position:absolute;right:-9px;top:calc(50% - 5px);border:6px solid transparent;border-left:0;border-right:8px solid var(--rail)}
.seq-return-label{position:absolute;left:calc(50% + 150px + 42px);top:50%;transform:translateY(-50%);max-width:120px;font-size:14px;line-height:1.35;color:var(--green);font-weight:500;text-align:left}

/* Dispatch and payment move both ways */
.seq-twoway-label{font-size:14px;line-height:1.3;color:var(--green);font-weight:500}

/* ---------- Desktop: centred spine ---------- */
@media(min-width:900px){
  .seq-phase+.seq-phase{padding-top:40px}
  .seq-steps{align-items:center}
  .seq-steps>.seq-step{width:min(100%,440px)}
  .seq-steps>.seq-group{width:100%}
  .seq-steps>.seq-loop{width:min(100%,700px)}
  .seq-steps>.seq-step+.seq-step{margin-top:var(--gap)}
  .seq-steps>.seq-step+.seq-step:before,.seq-phase+.seq-phase .seq-steps>.seq-step:first-child:before{content:"";position:absolute;left:calc(50% - 1px);width:2px;top:calc(-1 * var(--gap));height:var(--gap);background:var(--rail)}
  .seq-phase+.seq-phase .seq-steps>.seq-step:first-child:before{top:-106px;height:106px}
  .seq-steps>.seq-step.seq-twoway{margin-top:64px}
  .seq-steps>.seq-step.seq-twoway:before{top:-64px;height:64px}
  .seq-steps>.seq-step:has(+.seq-twoway)>.seq-box:before{content:"";position:absolute;bottom:-9px;left:calc(50% - 6px);border:6px solid transparent;border-top:0;border-bottom:8px solid var(--rail)}
  .seq-twoway-label{position:absolute;top:-64px;height:64px;left:calc(50% + 18px);display:flex;align-items:center;white-space:nowrap}
}

/* ---------- Mobile: one left rail ---------- */
@media(max-width:899px){
  .production-sequence{--gap:16px}
  .sequence-intro{grid-template-columns:1fr;gap:16px;margin-bottom:40px}.sequence-intro .sub{justify-self:start}
  .seq-phase{padding-bottom:30px}.seq-phase:last-child{padding-bottom:0}
  .seq-phase:before{content:"";position:absolute;left:17px;width:2px;top:0;bottom:0;background:var(--rail)}
  .seq-phase:first-child:before{top:18px}
  .seq-head{margin-bottom:16px}.seq-head h3{font-size:1.35rem}
  .seq-steps{margin-left:46px;gap:var(--gap)}
  /* tick from the rail into each step */
  .seq-steps>.seq-step:after{content:"";position:absolute;left:-27px;top:25px;width:18px;height:2px;background:var(--rail)}
  .seq-steps>.seq-step>.seq-box:after,.seq-steps>.seq-group>.seq-frame:after{content:"";display:block;position:absolute;top:20px;left:-10px;border:6px solid transparent;border-right:0;border-left:8px solid var(--rail)}
  .seq-phase:first-child .seq-steps>.seq-step:first-child>.seq-box:after{display:block}
  /* end the rail at the last tick */
  .seq-phase:last-child .seq-steps>.seq-step:last-child:before{content:"";position:absolute;left:-31px;width:10px;top:27px;bottom:-2px;background:var(--paper)}
  .seq-box{font-size:15px;padding:13px 14px}
  .seq-frame{padding:42px 12px 14px}
  .seq-tag{top:16px;left:14px}
  /* inside frames: no stems or bars, lanes stack */
  .seq-fork,.seq-top{display:flex;flex-direction:column}
  .seq-fork:before,.seq-fork:after{display:none}
  .seq-lane>li:first-child{padding-top:0}.seq-lane>li:last-child{padding-bottom:0}
  .seq-lane>li:first-child>.seq-box:after{display:none}
  .seq-lane>li+li{padding-top:20px}
  .seq-lane>li.seq-nest{padding-top:12px}
  /* forks become a branch rail with a tick into each lane */
  .seq-fork,.seq-top{padding:0 0 0 18px;margin-left:6px;border-left:2px solid var(--rail);gap:14px}
  .seq-fork>.seq-lane{position:relative}
  .seq-fork>.seq-lane:before{display:block;content:"";position:absolute;left:-18px;right:auto;top:24px;width:10px;height:2px;background:var(--rail)}
  .seq-fork>.seq-lane:after{display:block;content:"";position:absolute;left:-9px;right:auto;bottom:auto;top:19px;width:0;height:0;background:none;border:6px solid transparent;border-right:0;border-left:8px solid var(--rail);z-index:2}
  .seq-fork>.seq-lane:first-child:before,.seq-fork>.seq-lane:last-child:before{left:-18px;right:auto}
  .seq-fork>.seq-lane:first-child:after,.seq-fork>.seq-lane:last-child:after{left:-9px;right:auto}
  .seq-lane>li.seq-nest{padding-top:20px;background:linear-gradient(var(--rail),var(--rail)) no-repeat 6px top/2px 20px}
  .seq-sub>.seq-lane{padding:10px;border:1px dashed var(--rail);border-radius:10px}
  .seq-sub>.seq-lane:before{top:34px}.seq-sub>.seq-lane:after{top:29px}
  .seq-sub .seq-box{min-height:0}
  .seq-routes .seq-box{padding:13px 12px}
  .seq-routes .seq-detail{margin-top:8px}
  .seq-lane-loop{width:calc(100% - 40px)}
  .seq-lane-loop>li:first-child{padding-top:0}.seq-lane-loop>li:last-child{padding-bottom:0}
  .seq-lane-loop .seq-box{min-height:72px}
  .seq-lane-loop>li:last-child>.seq-box:before{right:-26px;width:26px;height:calc(100% + 20px)}
  .seq-return-label{position:static;transform:none;max-width:none;margin-top:12px}
  .seq-steps>.seq-twoway{margin-top:30px}
  .seq-steps>.seq-step.seq-twoway{margin-top:0}
  .seq-twoway-label{position:static;order:-1;display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:5px 12px;border-radius:999px;background:var(--paper-2);font-size:13.5px}
  .seq-twoway-label:before{content:"⇅";font-size:16px;color:var(--rail)}
  .seq-steps>.seq-twoway{display:flex;flex-direction:column;align-items:flex-start}
  .seq-steps>.seq-twoway>.seq-box{width:100%}
  .seq-steps>.seq-twoway:after{top:auto;bottom:24px}
  .seq-steps>.seq-twoway>.seq-box:after{top:auto;bottom:18px}
  .seq-phase:last-child .seq-steps>.seq-twoway:before{top:auto;bottom:-2px;height:24px}
}

/* 2021 collections: same language as the product family cards (soft media tile, display name below) */
.collections{padding:clamp(72px,10vw,140px) 0 clamp(72px,10vw,140px);border-top:1px solid var(--line);scroll-margin-top:var(--hdr)}
.collection-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:20px;row-gap:40px;padding:0 var(--pad)}
.collection-card{display:block;color:inherit;min-width:0}
.collection-cover{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--paper-2)}
.collection-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale .9s var(--ease)}
.collection-cover.is-sketch img{mix-blend-mode:multiply}
.collection-info{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-top:16px}
.collection-info h3{font:500 clamp(1.3rem,1.85vw,1.85rem)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.collection-info p{margin-top:6px;font-size:13px;color:var(--ink-2)}
.collection-open{font-size:20px;line-height:1.3;color:var(--green);transition:transform .45s var(--ease)}
.collection-card:hover .collection-cover img{scale:1.035}
.collection-card:hover .collection-open,.collection-card:focus-visible .collection-open{transform:translate(3px,-3px)}
.collection-card:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.collection-cover img,.collection-open{transition:none}.collection-card:hover .collection-cover img{scale:1}.collection-card:hover .collection-open{transform:none}}
@media(min-width:701px) and (max-width:1100px){.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:28px}.collection-info{padding-top:12px;gap:8px}.collection-info h3{font-size:1.2rem}.collection-info p{font-size:12px}.collection-open{font-size:17px}}
.pcard-d .pmeta{display:block}.accessories-copy{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:42ch;margin-top:10px}

/* Motion: transform and opacity only; everything is visible without JS */
@keyframes sequence-in{from{opacity:.55;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .seq-phase.is-seen .seq-steps>.seq-step{animation:sequence-in .7s var(--ease) both}
  .seq-phase.is-seen .seq-steps>.seq-step:nth-child(2){animation-delay:.07s}
  .seq-phase.is-seen .seq-steps>.seq-step:nth-child(3){animation-delay:.14s}
  .seq-phase.is-seen .seq-steps>.seq-step:nth-child(4){animation-delay:.21s}
  .seq-phase.is-seen .seq-steps>.seq-step:nth-child(n+5){animation-delay:.28s}
}