.how-we-work__section{
  background:transparent;
}

.how-we-work__scene{
  min-height:0;
}

.how-we-work__inner{
  position:relative;
}

.how-we-work__intro{
  padding-top:48px;
  position:relative;
  text-align:center;
  z-index:2;
}

.how-we-work__eyebrow{
  font-size:12px;
}

.how-we-work__title{
  font-size:28px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
}

.how-we-work__lead{
  font-size:12px;
  max-width:500px;
}

.how-we-work__process{
  isolation:isolate;
  position:relative;
}

.how-we-work__art{
  aspect-ratio:6768/1476;
  background:none;
  display:block;
  left:calc(50% + min(.36%,4.25px));
  max-width:none;
  object-fit:contain;
  right:auto;
  transform:translateX(-50%);
  width:min(115.7%,1366px);
  z-index:0;
}

.how-we-work__timeline{
  list-style:none;
  padding:0;
  position:relative;
  z-index:1;
}

.how-we-work__stage:nth-child(1){--node-x:8.3%;--node-y:13.6525%}
.how-we-work__stage:nth-child(2){--node-x:29.4%;--node-y:31.8853%}
.how-we-work__stage:nth-child(3){--node-x:50%;--node-y:49.6454%}
.how-we-work__stage:nth-child(4){--node-x:69.7%;--node-y:66.7553%}
.how-we-work__stage:nth-child(5){--node-x:88.3%;--node-y:82.7896%}

.how-we-work__number{
  font-weight:200;
}

.how-we-work__stage h3{
  font-size:18px;
}

.how-we-work__description,
.how-we-work__result{
  font-size:12px;
}

.how-we-work__stage-body{
  align-items:center;
  display:flex;
  flex:1;
  flex-direction:column;
  width:100%;
}

.how-we-work__separator-dot{
  background:rgba(194,184,169,.78);
  border-radius:50%;
  display:block;
  flex:0 0 4px;
  height:4px;
  width:4px;
}

.how-we-work__result{
  display:block;
  text-align:center;
}

.how-we-work__result strong,
.how-we-work__result span{
  display:block;
}

.how-we-work__result strong{
  margin:0 0 4px;
  white-space:nowrap;
}

@media (min-width:900px){
  .how-we-work__scene{
    min-height:clamp(620px,57vw,730px);
    padding-bottom:0;
  }

  .how-we-work__intro{
    padding-top:clamp(40px,3.75vw,48px);
  }

  .how-we-work__title{
    font-size:clamp(24px,2.2vw,28px);
  }

  .how-we-work__process{
    margin-top:clamp(58px,6.1vw,78px);
    margin-left:auto;
    margin-right:auto;
    width:min(100%,1180px);
  }

  .how-we-work__art{
    bottom:auto;
    opacity:1;
    top:clamp(-92px,-7.2vw,-65px);
  }

  .how-we-work__timeline{
    background-image:
      linear-gradient(180deg,transparent 0%,rgba(255,255,255,.018) 12%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.018) 88%,transparent 100%),
      linear-gradient(180deg,transparent 0%,rgba(255,255,255,.018) 12%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.018) 88%,transparent 100%),
      linear-gradient(180deg,transparent 0%,rgba(255,255,255,.018) 12%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.018) 88%,transparent 100%),
      linear-gradient(180deg,transparent 0%,rgba(255,255,255,.018) 12%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.018) 88%,transparent 100%);
    background-position:18.85% -18px,39.7% -18px,59.85% -18px,79% -18px;
    background-repeat:no-repeat;
    background-size:1px calc(100% + 5px);
    display:block;
    height:clamp(327px,calc(28.15vw + 12px),372px);
    margin:0;
    max-width:none;
    position:relative;
    width:100%;
  }

  .how-we-work__stage{
    align-items:center;
    bottom:0;
    display:flex;
    flex-direction:column;
    left:var(--node-x);
    min-height:0;
    padding:0 clamp(6px,.85vw,11px) 0;
    position:absolute;
    text-align:center;
    top:0;
    transform:translateX(-50%);
    width:17.6%;
  }

  .how-we-work__stage+.how-we-work__stage:before{
    display:none;
  }

  .how-we-work__number{
    font-size:clamp(28px,2.65vw,34px);
    left:auto;
    position:static;
    text-align:center;
    top:auto;
    transform:translateY(-14px);
    width:auto;
  }

  .how-we-work__marker{
    border:0;
    border-radius:0;
    box-shadow:none;
    flex:1 1 auto;
    height:auto;
    left:auto;
    min-height:0;
    position:static;
    top:auto;
    width:1px;
  }

  .how-we-work__stage-body{
    flex:0 0 256px;
    height:256px;
  }

  .how-we-work__stage h3{
    font-size:clamp(15px,1.4vw,18px);
  }

  .how-we-work__description,
  .how-we-work__result{
    font-size:clamp(11px,.94vw,12px);
  }

  .how-we-work__description{
    margin-top:clamp(14px,1.7vw,22px);
  }

  .how-we-work__separator-dot{
    background:rgba(194,184,169,.3);
    flex:0 0 2px;
    height:2px;
    margin-top:auto;
    transform:translateY(-10px);
    width:2px;
  }

  .how-we-work__result{
    height:82px;
    margin-top:14px;
    transform:translateY(-10px);
    width:min(100%,118px);
  }
}

@media (max-width:899.98px){
  .how-we-work__scene{
    padding-bottom:clamp(48px,8vw,64px);
  }

  .how-we-work__intro{
    padding:clamp(40px,7vw,54px) 20px 0;
  }

  .how-we-work__title{
    font-size:24px;
    margin-top:10px;
  }

  .how-we-work__lead{
    font-size:clamp(11px,1.8vw,12px);
    line-height:1.55;
    margin-top:16px;
  }

  .how-we-work__lead br{
    display:none;
  }

  .how-we-work__process{
    --art-length:clamp(1280px,350vw,1620px);
    --rail-x:72px;
    margin:clamp(44px,8vw,62px) auto 0;
    max-width:610px;
    position:relative;
  }

  .how-we-work__art{
    height:auto;
    left:calc(var(--rail-x) + var(--art-length) * .1090425532);
    opacity:1;
    top:0;
    transform:rotate(90deg);
    transform-origin:0 0;
    width:var(--art-length);
  }

  .how-we-work__timeline{
    display:block;
    height:var(--art-length);
    margin:0;
    max-width:none;
    padding:0;
    position:relative;
  }

  .how-we-work__stage{
    align-items:initial;
    display:block;
    left:0;
    min-height:0;
    padding:0;
    position:absolute;
    text-align:left;
    top:calc(var(--node-y) - 16px);
    width:100%;
  }

  .how-we-work__stage+.how-we-work__stage:before,
  .how-we-work__marker{
    display:none;
  }

  .how-we-work__number{
    font-size:clamp(24px,3.2vw,28px);
    left:0;
    line-height:1;
    position:absolute;
    text-align:right;
    top:0;
    width:48px;
  }

  .how-we-work__stage-body{
    align-items:flex-start;
    display:flex;
    flex-direction:column;
    margin-left:102px;
    padding-right:20px;
    width:calc(100% - 102px);
  }

  .how-we-work__stage h3{
    font-size:15px;
  }

  .how-we-work__description,
  .how-we-work__result{
    font-size:11px;
  }

  .how-we-work__description{
    margin-top:12px;
  }

  .how-we-work__separator-dot{
    display:none;
  }

  .how-we-work__result{
    align-self:flex-start;
    height:auto;
    margin-top:18px;
    text-align:left;
    width:100%;
  }
}

@media (min-width:600px) and (max-width:899.98px){
  .how-we-work__process{
    --rail-x:clamp(150px,28vw,200px);
  }

  .how-we-work__number{
    left:calc(var(--rail-x) - 112px);
  }

  .how-we-work__stage-body{
    margin-left:calc(var(--rail-x) + 34px);
    max-width:280px;
    padding-right:0;
    width:calc(100% - var(--rail-x) - 34px);
  }
}

@media (max-width:599px){
  .how-we-work__section{
    padding-left:0;
    padding-right:0;
  }

  .how-we-work__eyebrow{
    font-size:11px;
  }

  .how-we-work__process{
    --rail-x:66px;
  }

  .how-we-work__number{
    width:44px;
  }

  .how-we-work__stage-body{
    margin-left:94px;
    width:calc(100% - 94px);
  }
}

@media (min-width:420px) and (max-width:599.98px){
  .how-we-work__process{
    --rail-x:clamp(92px,21vw,112px);
  }

  .how-we-work__number{
    left:calc(var(--rail-x) - 64px);
  }

  .how-we-work__stage-body{
    margin-left:calc(var(--rail-x) + 34px);
    max-width:300px;
    padding-right:0;
    width:calc(100% - var(--rail-x) - 34px);
  }
}

.how-we-work--motion-ready .how-we-work__intro,
.how-we-work--motion-ready .how-we-work__art,
.how-we-work--motion-ready .how-we-work__stage>.how-we-work__number,
.how-we-work--motion-ready .how-we-work__stage>.how-we-work__stage-body{
  opacity:0;
}

.how-we-work--motion-ready .how-we-work__intro{
  translate:0 8px;
  transition:
    opacity 720ms cubic-bezier(.22,1,.36,1),
    translate 720ms cubic-bezier(.22,1,.36,1);
}

.how-we-work--motion-ready .how-we-work__intro.is-in-view{
  opacity:1;
  translate:0 0;
}

.how-we-work--motion-ready .how-we-work__art{
  filter:brightness(.72) saturate(.82);
  -webkit-mask-image:linear-gradient(90deg,#000 0 46%,rgba(0,0,0,.85) 48%,rgba(0,0,0,.45) 51%,transparent 54.5%,transparent 100%);
  -webkit-mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:220% 100%;
  mask-image:linear-gradient(90deg,#000 0 46%,rgba(0,0,0,.85) 48%,rgba(0,0,0,.45) 51%,transparent 54.5%,transparent 100%);
  mask-position:100% 0;
  mask-repeat:no-repeat;
  mask-size:220% 100%;
  transition:
    opacity 620ms cubic-bezier(.22,1,.36,1),
    filter 1100ms cubic-bezier(.22,1,.36,1),
    -webkit-mask-position 1100ms cubic-bezier(.22,1,.36,1),
    mask-position 1100ms cubic-bezier(.22,1,.36,1);
}

.how-we-work--motion-ready .how-we-work__art.is-in-view{
  filter:none;
  -webkit-mask-position:0 0;
  mask-position:0 0;
  opacity:1;
}

.how-we-work--motion-ready .how-we-work__stage{
  --stage-motion-delay:0ms;
}

.how-we-work--motion-ready .how-we-work__stage>.how-we-work__number,
.how-we-work--motion-ready .how-we-work__stage>.how-we-work__stage-body{
  translate:0 8px;
  transition:
    opacity 680ms cubic-bezier(.22,1,.36,1) var(--stage-motion-delay),
    translate 680ms cubic-bezier(.22,1,.36,1) var(--stage-motion-delay);
}

.how-we-work--motion-ready .how-we-work__stage>.how-we-work__stage-body{
  transition-delay:calc(var(--stage-motion-delay) + 60ms);
}

.how-we-work--motion-ready .how-we-work__stage.is-in-view>.how-we-work__number,
.how-we-work--motion-ready .how-we-work__stage.is-in-view>.how-we-work__stage-body{
  opacity:1;
  translate:0 0;
}

@media (min-width:900px){
  .how-we-work--motion-ready .how-we-work__stage{
    --stage-motion-delay:var(--motion-delay);
  }
}

@media (prefers-reduced-motion:reduce){
  .how-we-work--motion-ready .how-we-work__intro,
  .how-we-work--motion-ready .how-we-work__art,
  .how-we-work--motion-ready .how-we-work__stage>.how-we-work__number,
  .how-we-work--motion-ready .how-we-work__stage>.how-we-work__stage-body{
    filter:none;
    transition-delay:0s;
    transition-duration:0s;
    opacity:1;
    translate:0 0;
    -webkit-mask-position:0 0;
    mask-position:0 0;
  }
}